網站背景圖片 - 如何？

根據以下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

網站背景圖片 - 如何？

回答

相關問題