Question

这是我的网站编码，我已遇到问题，请帮助！

这是我的CSS样式表：

.center {
  position: absolute;
  left: 50%;
}

body
{
  background-color: #45a8e1;
  background-image:url('images/background.png');
  background-repeat:repeat-x;
}

然后是HTML：

<body>

  <div id="header" class="center">
    <img src="images/header.png">
  </div>

</body>

最终结果还可以，但页面非常宽。我正在尝试将我的背景图像放在视口（页面）中。此外，我想把我的div放在中心，因为页面很宽，所以它似乎不起作用。

Answer 1

使用此css：

.center {
   display:inline-block;
   margin: 0 auto;
}

body
{
  width: 100%;
  text-align: center;
  background-color: #45a8e1;
  background:url('images/background.png');
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  background-repeat:repeat-x;
}

注意：IE8及以下版本不支持background-size。

Answer 2

试试这个 - jsFiddle

#header {
    background: url('/*yourImageHere*/') repeat-x center;
    height:200px;
    width:100%;
}

背景中心问题

2 个答案: