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: 
I've used [these techniques](http://css-tricks.com/perfect-full-page-background-image/) 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](http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/) if you want to get away from the bugs in the above.
Use Directly like this

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

```

or call CSS separately like

```
.bg-div{
    background-image: url(../img/beach.jpg);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

```