将背景图像保持在底部答案

【问题标题】：Keeping background image at bottom将背景图像保持在底部
【发布时间】：2011-03-22 05:03:38
【问题描述】：

我一直在研究将图像保留在底部页面的解决方案。我目前得到的代码是：

.footer {
    background-image: url('images/footer.png');
    background-repeat: repeat-x;
    position: absolute;
    height: 950px;
    width: 100%;
    z-index: -101;
    bottom: 0;
}

但是，这有问题。我的目标是贴在底部并显示在其他所有内容后面的背景（因此 z-index 较低）。我在顶部有以下代码（有一个中间，只是块颜色，刚刚添加到正文中）：

.background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 600px;
    background-image: url('images/sky.png');
    background-position: center;
    background-repeat: repeat-x;
    z-index: -100;
}

请注意：第一部分不起作用（不在底部），但第二部分起作用（在顶部）。
如果您想访问该网站，请随时访问：www.duffydesigns.co.uk/brough（请不要妄加判断，这是一项正在进行的工作，没有真正完成！）。
感谢您的帮助，
约瑟夫·达菲
注意：我相信你能猜到，上面是天空，下面是草和树。

【问题讨论】：

标签： html css

【解决方案1】：

background-position 接受两个参数，一个 x 值和一个 y 值，因此要将其放置在底部，您可以使用：background-position: center bottom;。您可以使用它来修复您的第一个示例。

有什么原因不能将背景作为body 或html 标签的背景？我不认为在html 标签后面是官方允许的，但我从来没有见过它不能工作的浏览器（反正还没有......）。

【讨论】：

我忘了简单地将它添加到body 也可以让你的身体的其余部分充满颜色。谢谢！ :)
不客气！顺便说一句，您标记了您的问题css3 和css3 允许多个背景。以防万一。

【解决方案2】：

如果您希望背景图片出现在页面底部，您可以使用：

body {
    background-image: url(...);
    background-position: center bottom;
    background-repeat: no-repeat;
}

【讨论】：

【解决方案3】：

这样做

<div class="background"></div>

.background {
    width:100%;
    height:90px;
    background:transparent url(...) repeat-x 0 0;
    position:fixed;
    bottom:0;

}

在http://jsfiddle.net/YGXxT/查看工作示例

【讨论】：

【解决方案4】：

如果您希望它始终显示在最底部（页面，而不是窗口），请使用类似的东西，将其粘贴到 html 文件中以查看它的工作情况，将 .test 的高度更改为显示当窗口不滚动时它会停留在屏幕底部，但当它滚动时它会进一步向下。

<html>
<head>
<style type="text/css">
    html, body{
        height:100%;
        margin:0;
        }
    #content{
        min-height:100%;
        position:relative;
        }
    #footer{
        background:green;
        width:100%;
        height:150px;
        margin-top:-150px;
        display:block;
        }
    .test{
        background:blue; 
        width:400px; 
        height:2000px; 
        opacity:.7; 
        color:#fff; 
        padding:20px;
        }
</style>
</head>
<body>
<div id="content">
    <h1>This is a page.</h1>
    <div class="test">this shows that things appear in front of the bg</div>
</div>
<div id="footer"></div>
</body>
</html>

【讨论】：

【解决方案5】：

添加min-height: 100% 而不是height: 950px，这将为您的 div 提供必要的高度。其次，使用position:fixed将背景图片锁定在同一位置（用于滚动）。

【讨论】：

抱歉，我没说清楚。我希望图像出现在页面底部，而不是视口，以及页面顶部，而不是视口。不过，感谢您的帮助。