我有一些代碼：背景的頂部和底部

<body> 
<div id="container"> 
<div id="top"></div> 
<div id="bottom"></div> 
</div> 
</body>

集裝箱寬度，例如900px。在#top我使用body設置背景。

但是我不能在#bottom中使用背景，因爲當它會變得更寬時，例如1080px（只會在#container中看到背景），它會崩潰。這個怎麼做？

EDIT1：

body 
{ 
background-image: url("images/bg_main.png"); 
background-repeat:repeat-x; 
} 
#top 
{ 
    background-image: url("images/top_bg.png"); 
    height:50px; 
} 
#container 
{ 
    margin: 0; 
    width: 1024px; 
    background:#fff; 
} 
#footer 
{ 

    background-image:url("images/bottom.png") 
}

但它創建內部容器（我需要創建底部BG外容器，當網站家業更寬）

EDIT2：

我認爲，我發現了一個解決方案： html{;background-image:url('images/bottom.png');background-repeat:repeat-x;background-position:left bottom;}，然後將div高度設置爲bottom.png

來源

2012-02-24 beetle

你可以發佈一些更多的代碼嗎？用你現在的小片段，我不知道該說什麼。例如，「在#top我使用body設置背景」是什麼？ – 2012-02-24 12:11:36

我很不清楚你想要達到的目標......你可以嘗試用更多的信息來延伸你的問題嗎？ – NDM 2012-02-24 12:12:17

聽起來像他遇到的問題是#bottom div中的背景圖像被裁剪，因爲它被限制在與容器div（900px而不是1080px）相同的寬度。最簡單的解決方案是簡單地將#container的寬度擴大到1080px，有沒有理由不能這樣做？ – DNJohnson 2012-02-24 12:16:03

你的意思是這樣嗎？

HTML：

<body> 
    <div id="container"> 
     <div id="top"></div> 
     <div id="bottom"></div> 
    </div> 
    <div id="footer"></div> 
</body>

，並添加以下的CSS：

#footer 
{ 
    width:100%; 
    height:40px; //Or something else you'd like 
    background-color: yellow; //Or the image you want 
}

來源

2012-02-24 12:30:56

但我需要腳註內容在同一級別的容器。 – beetle 2012-02-24 12:35:40

我認爲我找到了一個解決方案：html {; background-image：url（'images/bottom.png'）; background-repeat：repeat-x; background-position：left bottom;}，然後將div高度設置爲a bottom.png – beetle 2012-02-24 12:38:18

我不太明白「同級」的意思。我認爲你的意思是頁腳內容必須在容器內。如果你的意思是這個答案是不可能的。如果容器變大（如果寬度：100％），頁腳只會變大。如果您將腳註放在容器的外部（如果寬度：100％），則會在窗口大小調整時調整大小。 – 2012-02-24 12:41:53

我建議嘗試把你的#bottom外#container比，因爲內#container你不能提高你的寬度更比#container。試試這個：

#container{ 
    width:1024px; //or whatever 
} 
#bottom{ 
    height:40px; //or whatever 
    width:100%; 
    background:url("images/bottom.png") repeat-x center; 
}

來源

2012-02-24 12:31:47 Asif

如果瀏覽器小於1080px，這會給你一個水平滾動條。如果瀏覽器寬度超過1080像素，底部也不會移動。如果你希望這個容器在沒有容器的情況下變寬，你應該將容器的底部放在容器的外面。但這不是一般的溶劑。 – 2012-02-24 12:34:31

我認爲我找到了一個解決方案：html {; background-image：url（'images/bottom.png'）; background-repeat：repeat-x; background-position：left bottom;}，然後設置div高度爲bottom.png – beetle 2012-02-24 12:39:10

@RickHoving：謝謝。請參閱編輯的代碼。這將是一個解決方案嗎？ – Asif 2012-02-24 15:57:45

背景的頂部和底部

EDIT1：

EDIT2：

回答

相關問題