How to create a full-page (cover) background image using CSS

Zach Zach (236)
5 minutes

Using CSS, you can display beautiful background images that span the entirety of the user's window -- regardless of their resolution. Here's how to do it.

Posted in these interests:
h/webdesign18 guides
h/www5 guides
h/css4 guides

Upload your background image onto your web server. I recommend a background photo of at least 1200px in width.

html {
    background: url('images/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

To add support for older versions of Internet Explorer, add the following lines:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Take a trip down memory lane or discover the origins of the most popular websites around!
Michael Michael (174)

Ever wondered what some of the homepages you visit daily looked like when they first launched?