不擴展到頁面底部的背景圖片

我在我的網站上的一個頁面上工作，其中包含相當多的數據，所以頁面非常長。該頁面由主體的背景圖像和具有背景圖像的容器組成，兩者都運行頁面的整個長度（不是頂部或底部邊距，也沒有頂部或底部填充）。我遇到了背景圖像的問題：它們沒有以某些分辨率擴展到頁面的底部。我編碼的屏幕寬度爲1680像素，目前這兩個背景圖像一直延伸到底部。但是，當我在較小分辨率的屏幕（例如寬度爲1280像素的屏幕）上查看頁面時，背景圖像不會一直延伸到底部。不擴展到頁面底部的背景圖片

我正在使用XHTML 1.0 Strict。

下面是相關的HTML代碼：

<body class="ice01"> 
<div id="maincontent2"> 
<!-- content --> 
</div> 
</body>

下面是相關的CSS代碼：

.ice01 { 
background-image: url('../images/iceBackground04.jpg') ; 
    margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;} 


#maincontent { 
width: 88%; 
background-image: url(../Images/BlueParchment.jpg); 
margin: 0px auto; 
padding: 0px 32px 0px 32px;}

這個問題也提出了自己，如果我調整我的窗口。另外，如果我拿出背景圖像並用顏色代替它，這個問題就會消失。我嘗試過使用後面的速記（background: #0000ff url('../images/iceBackground04.jpg') repeat 0 0;），但這並沒有解決問題。

我已經嘗試在它們兩個上使用min-height: 100%;，它不能解決問題。我也通過W3C驗證了網頁，它全部檢出，所以我不認爲它是由任何丟失/未封閉的標籤引起的。

這裏是有問題的網頁的網址：http://icengale.com/icenDeities-Mainen.html

我使用的是「重置」的CSS文件，但刪除不解決這個問題，所以我不認爲這是造成問題。

任何和所有的幫助，非常感謝，謝謝！

來源

2013-07-03 Mock26

您是否嘗試過repeat-y屬性？ – 2013-07-03 04:45:19

在Firefox中正常工作 – JanR

正常工作...！ –

如果有效，請使用下面的CSS來嘗試。

.ice01 { 
background:url(../images/iceBackground04.jpg) repeat-x 0 0; 
margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;} 


#maincontent { 
width: 88%; 
background:url(../images/BlueParchment.jpg) repeat-x 0 0; 
margin: 0px auto; 
padding: 0px 32px 0px 32px;}

來源

2013-07-03 04:56:27

這不起作用，Swarnamayee Mallia。它的確激勵我做了一點測試，並且背景圖像在大約32,750px處停止（我向背景圖像添加了一個邊框並計算出它重複的次數）。它只在Firefox中停止。它通常在IE8中顯示。我還沒有測試過其他任何東西。 – Mock26

不擴展到頁面底部的背景圖片

回答

相關問題