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: 
Add this in your css file:

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

```

and then, in your .html (or .php) file call this class like that:

```
<div class="custom_class">
   ...
</div>

```
Here is the simple code for full page background image when zooming
you just apply the `width:100%` in style/css thats it

`position:absolute; width:100%;`