Full-Width Backgrounds Using CSS Cover

More and more, I see websites with large image backgrounds that completely fill the screen size.

I really like these and here’s how to achieve it simply using CSS:

.section {
background: url(images/bigbackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bigbackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bigbackground.jpg', sizingMethod='scale')";
}

That’s it! Obviously you need to change the Div name and background image/path to suit but you’re good to go.