背景图像位置，居中中心不起作用

Question

我正在尝试创建一个具有居中背景图像并使用位置中心的页面。但图像并没有在垂直和水平方向上居中显示，而是垂直延伸到页面顶部之外。我哪里/为什么出错了？

<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>

Answer 1

您会看到如下图所示的屏幕吗？

body{
  background-image:url(../IMG/BG/pizzaBackground.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

我认为这是因为你没有声明“身高”。

添加“高度：100vh”样式。

body{
  height: 100vh;    /* ADD STYLE ! */
  background-image:url(../IMG/BG/pizzaBackground.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

之所以设置为100vh是因为目标是body标签。

如果是不同的标签，请使用不同的值。

那么这将是

并添加“margin:0px”样式以删除滚动。

body{
  margin: 0px;     /* ADD STYLE ! */
  height: 100vh;
  background-image:url(../IMG/BG/pizzaBackground.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

然后你就可以看到

谢谢！

Answer 2

您可以使用封面

background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

http://jsfiddle.net/ou10gmfd/

Answer 3

试试这个：

背景位置：50% 50%；

或者也许你应该在第一个中心之前尝试一个空格（可能是一个问题）。

Answer 4

这很可能是因为您的图像过多使用了background-size: cover;覆盖整个身体的背景

Answer 5

删除背景颜色并添加这些

background-size: cover background-position: 50% 50%

给身体 100vh 最小高度，这将有助于解决这个问题

Answer 6

从页面中删除 DOCTYPE html，它将正常工作。或使用背景附件：固定；。那么你不必删除 DOCTYPE html

背景图像位置，居中中心不起作用

问题描述投票：0回答：6

6个回答

最新问题

背景图像位置，居中中心不起作用

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6