网站背景图片 - 如何？

根据以下CSS和HTML代码进行查询（请参阅下面的内容）网站背景图片 - 如何？

我有一个跨越整个浏览器页面的背景图像（从左到右），这不是我所追求的。

如何获取背景图像以保持在我的主内容画布的边界内，即居中的850x600像素以及任何外部是白色的？

谢谢。

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>

来源

2010-02-07 tonyf

你如何将背景图像放在#main上？

来源

2010-02-07 13:06:00 Gareth

如果要将背景附加到main DIV，则在那里指定背景。这听起来像你想要背景水平居中（background-position: 50%;），但重复的DOT（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两个浮动。

来源

2010-02-07 13:07:05

谢谢你，但不幸的是我的背景图片不再出现。仅供参考，我的背景图像文件是一个尺寸为22x600的垂直条。任何进一步的帮助将不胜感激。我在Mac OS X上使用Chrome或FF。谢谢。 – tonyf

然后放弃Domonic的背景重复行 – Mark

仍然不工作 - 真的认为这将是一个容易的，但这让我难住！ – tonyf

多米尼克是正确的。将背景属性从正文移到主div，你应该有你需要的。

如果我理解正确你的问题，你想要的页面背景设置为白色，有你的主要div的背景是什么形象，你把它设置为 - 是否正确？

如果是的话，定身到：

body 
{ 
    background:#fff; 
}

应该做的伎俩。

现在，我也注意到你想要使用的图像的宽度比你的div小。所以你会想主要有以下特性：

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

这应该做的伎俩。如果它仍然不起作用，也许你想分享服务器上的页面链接。有可能我们误解了你的问题。

来源

2010-02-07 13:13:11 noobzilla

不幸的是， – tonyf

网站背景图片 - 如何？

回答

相关问题