即使在放大/缩小时，CSS 正文背景图像也固定为全屏

Question

我正在尝试用 CSS 实现这样的效果:

我想让正文背景图像固定在全屏上，这可以通过以下代码完成:

body
{
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

现在我可以验证窗口确实充满了该图像，至少这在我的 Firefox 3.6 上有效

但是，当我尝试放大/缩小 (ctrl+-/+) 时，它搞砸了，图像只是随着页面缩放而被拉伸(stretch)/缩小。

是否有更好的方法来纯粹使用 CSS 来完成此操作？我没有找到适合背景图像的属性。

或者我应该开始考虑使用 jQuery 来动态操作宽度和高度吗？它们都设置为 100%，所以我认为应该“一如既往”地工作 :(

提前感谢您的任何建议!

Answer 1

还有一个技巧

使用

background-size:cover

就是这样 全套css是

body { 
    background: url('images/body-bg.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

最新的浏览器支持默认属性。