如何让背景图片固定在布局底部？

Question

我有这样一个背景，css代码如下：

body {
    background: #FFF url('images/bg.png') no-repeat bottom center;
    margin-bottom: -500px;
    width: 100%;
    height: 100%;
    color:#999;
}

这个图片高度为400像素，我希望将它对齐至页面底部。

目前来看，此方法只在Firefox浏览器中有效。在Chrome和IE浏览器中，背景位置是在顶部居中，而不是底部居中。

- mysqllearner

---

你在 html 上设置了 height: 100%; 吗？ - jensgram

@jens：没有，我没有。Tobias回答了我的问题，非常感谢大家。 - mysqllearner

Answer 1

您需要将 html 元素的高度也设置为 100%：

html, body {
    height: 100%; width: 100%;
    padding: 0; margin: 0;
}

body {
    background: #FFF url(images/bg.png) no-repeat bottom center;
}

此外，负边距在IE6/7中无法使用（IE8不确定）。

- Tobias Cohen

---

是的，我移除了负边距并添加了高度100％，现在它可以工作了。谢谢Tobias。 - mysqllearner