将背景图像保持在底部

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).我有顶部的下面的代码(有一个中间,这只是块颜色,只是添加到正文):

.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(请不要通过判断,这是一项正在进行的工作,没有什么是真正完成的!).
感谢你的帮助,
Joseph Duffy
注意:我相信你可以弄明白,顶部是天空,底部是草和树木.

Answer 1

background-position有两个参数,一个x值和一个y值,所以要将它放在底部,你可以使用:background-position: center bottom;.您可以使用它来修复您的第一个示例.

有什么理由,你不能把背景的背景body或html标签？我不认为它是正式允许的html标签背后,但我从未见过它不起作用的浏览器(不管怎样......).

Answer 2

如果你想让背景图片出现在页面底部，你可以使用：

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