3

我有一个带有 2 个背景图像的页面，其中一个需要显示在页面的最底部。目前我已经这样实现它：

body {
    background-image: url('/cheri/image/background.png'), 
                      url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}

当页面内容高于浏览器窗口时，这可以正常工作，但如果它更小，则会在背景图像下方留下空白区域，如下图所示：

http://img198.imageshack.us/img198/4560/screenshot20120916at851.png

我试图将主体设置为位置：绝对，高度：100%，但是当存在滚动时它没有正确呈现。我还尝试为背景图像创建一个单独的 div 并将其绝对定位到底部，但由于底部出现的某些元素具有不同的位置属性，z-indexing 无法正常工作。

谢谢你的帮助！

4

2 回答 2

9

min-height: 100%在html和上使用body：

html, body { min-height: 100%; }

演示

当您有足够的内容导致滚动时，它不会产生任何问题。

演示

于 2012-09-16T10:56:58.717 回答
1

同时设置 HTML 元素：

html {
    background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}
于 2012-09-16T06:14:34.107 回答