保持底部的背景图像 [英] Keeping background image at bottom

问题描述

我一直在使用一个解决方案来保持图像在底部。我目前的代码是：

I've been working with a solution for keeping images at the bottom page. The code I've currently got is:

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

但是，这有问题。我的目标是一个背景，坚持到底部，并显示在其他一切（因此低z指数）。我有一个下面的代码为顶部（有一个中间，只是块颜色，只是添加到正文）：

However, this has issues. What I'm aiming for is a background that sticks to the bottom and is displayed behind everything else (Hence the low z-index). I've got the following code for the top part (There's a middle, that's just block colour, and just added to the body):

.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

注意：我相信您可以顶部是天空，底部是草和树。

Please note: The first part doesn't work (It's not at the bottom), but the second part does (It's at the top).
If you wish to visit the site, feel free to: www.duffydesigns.co.uk/brough (Please don't pass judgment, it's a work in progress, nothing is truly finished!).
Thanks for the help,
Joseph Duffy
Note: As I'm sure you can figure out, the top part is the sky, the bottom is grass and trees.

推荐答案

位置有两个参数，一个x值和一个y值，所以要将它放在底部，你可以使用： background-position：center bottom; 。

background-position takes two arguments, an x-value and an y-value so to position it at the bottom, you would use: background-position: center bottom;. You could use this to fix your first example.

有任何理由不能将背景作为正文的背景或 html 标记？我不认为它是正式允许的 html 标签，但我从来没有看到一个浏览器，它不工作（还没有...）。

Is there any reason that you cannot put the background as the background of the body or the html tag? I don´t think it is officially allowed behind the html tag, but I have never seen a browser where it doesn´t work (not yet anyway...).

这篇关于保持底部的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！