-2

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

这是我的 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 居中，因为页面太宽，这似乎不起作用。

4

2 回答 2

0

试试这个 - jsFiddle

#header {
    background: url('/*yourImageHere*/') repeat-x center;
    height:200px;
    width:100%;
}
于 2013-04-17T03:25:36.850 回答
0

使用这个 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;
}

注意：background-sizeIE8 及以下不支持。

于 2013-04-17T01:56:56.920 回答