Question

根据以下CSS和HTML代码进行查询（见下文）

我有一个跨越整个浏览器页面的背景图片（从左到右），这不是我想要的。

如何让背景图像保持在我的主要内容画布的边界内，即以850x600px为中心，外面只是白色？

感谢。

    body {
background-color: #ffffff;
margin:0px;
padding:0px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
}

#main {

width:850px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;

}

<body>

<div id="main">
<img src="images/female_model.jpg" id="female_model" alt="" />
<div id="colwrap1">
<img src="images/nav_bar.jpg" id="nav_bar" alt="" />
<img src="images/site_name.jpg" id="site_name" alt="" />
</div>
</div>

</body>

Answer 1

如果要将背景附加到main DIV，请在此处指定背景。听起来您希望背景水平居中（background-position: 50%;），但要重复main DIV（background-repeat: repeat-y;）的垂直范围。

body {
  background-color: white;
  margin: 0px;
  padding: 0px;
}

#main {
  background-image: url(images/background.jpg);
  background-repeat: repeat-y;
  background-position: 50%;

  // rest as before ...
  width: 850px;
  ...
}

<div id="main">
   Lorem ipsum dolor sit amet, ...

如果您的背景图片没有显示，可能是因为图片无法访问或main DIV没有高度 - 如果female_model和colwrap1都浮动，则可能会发生这种情况。 / p>

Answer 2

您如何将背景图片放在#main？

上

Answer 3

多米尼克是正确的。将背景属性从body移动到主div，您应该拥有所需的内容。

如果我已正确理解您的问题，您希望将页面背景设置为白色，并将主div的背景设置为您设置的任何图像 - 正确吗？

如果是，请将正文设置为：

body
{
  background:#fff;
}

应该这样做。

现在，我还注意到您要使用的图像宽度小于div。因此，您希望main具有以下属性：

#main
{
   background-image:url(myimage.jpg);
   background-position:top;
   background-repeat:repeat-x; <!-- you need this as your image is < than the div width -->
 }

这应该可以解决问题。如果它仍然无法工作，也许您想要共享服务器上的页面链接。我们可能误解了你的问题。

网站背景图片 - 如何？

3 个答案: