CSS背景圖片：頁面底部

Question

在我的網站上，我將3個背景圖像應用到body元素上（給人以頂部，左側和底部邊框的印象），如下所示：

body {
    background: url('../image/body-x.gif') repeat-x 0 0,
                url('../image/body-x.gif') repeat-x 0 100%,
                url('../image/body-y.gif') repeat-y -280px 0;
    background-color: #47b48e;
}

由於頁面很長，因此大多數情況下都可以正常顯示。 但是在較短的頁面上（例如404模板http://www.mattpealing.co.uk/asdfadsf），body-x.gif不會body-x.gif在頁面底部，如下所示：

在此處輸入圖片說明

我嘗試添加以下代碼（過去我讀過很多遍，這是一個常見的解決方案）：

html, body {
    height: 100%;
}

但是我永遠無法使它起作用。 它仍然沒有出現在底部，而是在其他頁面上將其斷開。 例如在“關於”頁面上，底部邊框圖像與主體副本重疊，如以下屏幕截圖所示：

在此處輸入圖片說明

誰能看到我在做什么錯？

Answer 1

嘗試：

html, body { min-height: 100% }

來自：使<body>充滿整個屏幕？

順便說一句，如果您在主體上使用白色的頂部和底部邊框，而僅將背景圖像用於左側空白怎么辦？ 這樣可以簡化代碼，並減少一些不必要的HTTP請求。

CSS背景圖片：頁面底部

問題描述

1 個解決方案

解決方案1
0 已采納 2014-12-29 18:33:18

CSS背景圖片：頁面底部

問題描述

1 個解決方案

解決方案1 0 已采納 2014-12-29 18:33:18

解決方案1
0 已采納 2014-12-29 18:33:18