CSS身体背景图像固定为全屏，即使放大/缩小 [英] CSS body background image fixed to full screen even when zooming in/out

问题描述

我想用CSS实现这样的东西：

I am trying to achieve something like this with CSS:

我想保持身体背景图片固定在全屏，这是由以下代码：

I'd like to keep the body background image fixed on fullscreen, this is sort of done by the following code:

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

现在我可以验证窗口是否已经填满了该图片，至少这在我的Firefox 3.6上工作

Now I can verify the window is indeed filled up with that image, at least this works on my Firefox 3.6

但是，当我试图放大/缩小（ctrl + - / +）时，图像被拉伸/页面缩放。

However, it screwed up when I tried to zoom in/out (ctrl+-/+), the image just is stretched/shrinked as the page zooms.

有没有更好的方法这样做纯粹使用CSS？我没有找到一个好的属性为背景图像。

Is there a better way of doing this purely with CSS? I didn't find a good property for the background-image.

或者我应该开始考虑jQuery来操纵的宽度和高度飞？他们都设置为100％，所以我认为应该工作一如既往：（

Or should I start thinking about jQuery to manipulate the width and height on the fly? They were both set to 100% so I reckon that should work "as always" :(

感谢任何建议！

推荐答案

我使用了这些技术之前，他们都很好。如果你阅读每个的利弊，你可以决定哪个是适合你的网站。

I've used these techniques before and they both work well. If you read the pros/cons of each you can decide which is right for your site.

或者，您也可以使用 full size background image jQuery plugin if you想要摆脱上面的bug。

Alternatively you could use the full size background image jQuery plugin if you want to get away from the bugs in the above.

这篇关于CSS身体背景图像固定为全屏，即使放大/缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！