How can make a background image resizable according to the browser resolution?


I am making a website where I am planning to use background as a single image which should be re-sizable in any browser resolution.

Is it possible, if yes then how? I found a solution using a separate div at the top and giving an fixed position and lowest z-index. Then that div has width and height of 100%, but its distorting the image in the higher resolution or stretching in such a way that its loosing its quality.

So please advice.

Thanks and Best Regards


Usually this is done with a bit of JavaScript. Here is a nice way to do it:

Also, Paul posted a nice example which uses CSS recently: