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

试试这个：

background-position: 50% 50%;

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

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

最有可能的原因是你的图像大量使用背景尺寸：封面;覆盖身体的整个背景

Answer 4

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

Picture A

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的原因是因为目标是正文标签。

如果是其他标签，请使用其他值。

这将是Picture B。

并添加'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;
}

然后您会看到Picture C

我刚刚注册，所以无法上传照片。

Answer 5

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

背景图像位置，中心不工作

5 个答案: