Fullscreen background using CSS

With this line of HTML and CSS you can set up a fullscreen image on your website, keeping the proportions, without using JS. It´s supported by all major browsers, even IE7.

The HTML is as follows:

<div class="background"></div>

The CSS is as follows (watch out for the capitals):

div.background { width:100%; height:100%; background-image:url(images/image.jpg); BACKGROUND-SIZE:COVER; }

If you are designing a mobile version of your site, maybe using a responsive technique, you should increase the height of the image to 120% in your mobile CSS and use JS to remove the address-bar.