CSS 背景图片：页面底部答案

【问题标题】：CSS Background Image: Bottom of PageCSS 背景图片：页面底部
【发布时间】：2014-12-30 02:33:18
【问题描述】：

在我的网站上，我将 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 不会粘在页面底部，如下所示：

我已尝试添加以下代码（我过去曾多次阅读，这是一种常见的解决方案）：

html, body {
    height: 100%;
}

但我永远无法让它发挥作用。它仍然没有出现在底部，而是在其他页面上打破了它。例如在 About 页面上，底部边框图像与正文重叠，就像这个屏幕抓图一样：

谁能看出我做错了什么？

【问题讨论】：

背景图像看起来是纯色的，所以为什么不是背景色

标签： html css image layout background-image

【解决方案1】：

试试：

html, body { min-height: 100% }

发件人：Make <body> fill entire screen?

顺便说一句，如果您在 body 上使用白色的顶部和底部边框并且只使用左侧空白区域的背景图像呢？这将使代码更简单，并减少一些不必要的 HTTP 请求。

【讨论】：

谢谢！这似乎工作得很好。另外我什至没有想过将顶部和底部设置为边框！我已经这样做了，但现在奇怪的是，我又回到了 404 页面布局上的原始问题……尽管其中的图像和 min-height 属性似乎可以正常工作！