如何設置以我的網站為中心的背景圖片？
[英]How to set a background image centred in my website?
問題描述
我有一個基於以下 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>
3 個解決方案
解決方案1
3 2010-02-07 13:07:05
如果要將背景附加到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都浮動，就會發生這種情況。
解決方案2
1 2010-02-07 13:06:00
你把背景圖片放在#main上怎么樣？
解決方案3
0 2010-02-07 13:13:11
多米尼克是對的。 將背景屬性從 body 移動到主 div，您應該擁有所需的內容。
如果我正確理解了您的問題，您想將頁面背景設置為白色，並將主 div 的背景設為您設置的任何圖像 - 正確嗎？
如果是這樣，請將 body 設置為：
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 -->
}
這應該夠了吧。 如果它仍然不起作用，也許您想在您的服務器上共享頁面鏈接。 我們可能誤解了您的問題。
如何以圖像居中的方式獲取網站的位置設置？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.