html - 将背景图像保持在底部

Question

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

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

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

.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(请不要做出判断，这是一项正在进行的工作，没有什么是真正完成的!)。
感谢您的帮助，
约瑟夫·达菲
注:相信大家已经看出来了，上面是天空，下面是草木。

Answer 1

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

有什么理由不能把背景作为body或者html标签的背景吗？我不认为它在 html 标签后面被正式允许，但我从未见过它不起作用的浏览器(无论如何都还没有......)。