Scaling background images is something I always wanted to have and so finally I started looking for the best possible way to accomplish this. There are quite a few ways that you can use to do this. But believe me the CSS way is the best one. You don't have to add any seperate js file or do any coding. And it works perfect with all the browsers. The only thing that we need to make sure if the image which will be stretching across the screen should have a really good negative z-index so that the content can come over the image and not behind.
Here is the HTML
This is where menu should come
Some content can come here.
Here first we have a header div inside the wrapper and then the image and then we continued with a p tag which can be our body.
First thing is to have the image position to absolute and from top and left as 0. This will make sure the image starts from the top left corner of the screen. And the next important thing is the negative z index. This is important, or else all the other text and content will be hidden below the image. Rest is simple like over flow of body to hidden, margin as 0 etc.
I hope this simple enough steps will give you an idea and also, if you want, you can download the html file and use your own image.
