CSS body background image fixed to full screen even when zooming in/out

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%;
}

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

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

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

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" :(

Thanks for any suggestion in advance!

28
задан Michael Mao 29 August 2010 в 11:20
поделиться