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: 
You can do quite a lot with plain css...the css property `background-size` can be set to a number of things as well as just `cover` as Ranjith pointed out.

The `background-size: cover` setting scales the image to cover the entire screen but may mean that some of the image is off screen if the aspect ratio of the screen and image are different.

A good alternative is `background-size: contain` which resizes the background image to fit the smaller of width and height, ensuring that the whole image is visible but may lead to letterboxing if the aspect ratios are different.

For example:

```
body {
      background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
      background-size: contain;
     }

```

The other options that I find less useful are:
`background-size: length <widthpx> <heightpx>` which sets the absolute size of the background image.
`background-size: percentage <width> <height>` background image is a percentage of the window size.
(see [w3schools.com's page](http://www.w3schools.com/cssref/css3_pr_background-size.asp))
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%;`