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

Question

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!

Answer 1

there is another technique

use

background-size:cover 

That is it full set of css is

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

Latest browsers support the default property.

Answer 2

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.

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