Image above credited to this site.

The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it:

• Fills entire page with image, no white space
• Scales image as needed
• Retains image proportions (aspect ratio)
• Image is centered on page
• Does not cause scrollbars
• As cross-browser compatible as possible
• Isn't some fancy shenanigans like Flash

Awesome, Easy, Progressive CSS3 Way

We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

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;
}

Works in:

• Safari 3+
• Chrome Whatever+
• IE 9+
• Opera 10+ (Opera 9.5 supported background-size but not the keywords)
• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

View Demo

Update: Thanks to Goltzman in the comments for pointing out an Adobe Developer Connection article which features some code to make IE do cover backgrounds as well:

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

But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead.

Update: Matt Litherland writes in to say that anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else (like Pierre above) should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.

CSS-Only Technique #1

Big thanks, as usual, to Doug Neiner for this alternate version. Here we use an inline <img> element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.

The especially clever bit is using a media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.

Here is the CSS:

img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
	img.bg {
		left: 50%;
		margin-left: -512px;   /* 50% */
	}
}

Works in:

• Any version of good browsers: Safari / Chrome / Opera / Firefox
• IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim
• IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine
• IE 9: Works

View Demo

CSS-Only Technique #2

One rather simple way to handle this is to put an inline image on the page, fixed position it to the upper left, and give it a min-width and min-height of 100%, preserving it's aspect ratio.

<img src="images/bg.jpg" id="bg" alt="">

#bg {
	position:fixed;
	top:0;
	left:0; 

	/* Preserve aspet ratio */
	min-width:100%;
	min-height:100%;
}

However, this doesn't center the image and that's a pretty common desire here... So, we can fix that by wrapping the image in a div. That div we'll make twice as big as the browser window. Then the image will be placed, still preserving it's aspect ratio and covering the visible browser window, and the dead center of that.

<div id="bg">
	<img src="images/bg.jpg" alt="">
</div>

#bg {
	position:fixed;
	top:-50%;
	left:-50%;
	width:200%;
	height:200%;
}
#bg img {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	min-width:50%;
	min-height:50%;
}

Credit to Corey Worrell for the concept on this one.

Works in:

• Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)
• IE 8+
• Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

View Demo

jQuery Method

This whole idea becomes a lot easier (from a CSS perspective) if we know if the aspect ratio of the image (inline <img> we intend to use as a background) is larger or smaller than the current aspect ratio of the browser window. If it is lower, than we can set only the width to 100% on the image and know it will fill both height and width. If it is higher, we can set only the height to 100% and know that it will fill both the height and width.

We have access to this information through JavaScript. As usual around here, I like to lean on jQuery.

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    

	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();

	function resizeBg() {

		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		    $bg
		    	.removeClass()
		    	.addClass('bgheight');
		} else {
		    $bg
		    	.removeClass()
		    	.addClass('bgwidth');
		}

	}

	theWindow.resize(function() {
		resizeBg();
	}).trigger("resize");

});

This doesn't account for centering, but you could definitely alter this to do that. Credits to Koen Haarbosch for the concept behind this idea.

Works in:

• IE7+ (could probably get in IE6 with a fixed position shim)
• Most any other desktop browser

View Demo

Enjoy

If you use this, please feel free to leave what technique you used and if you altered it in any way in the comments below. Always cool to see techniques "in the wild."

Download Files

Just for posterity's sake, there is another example in here called table.php which uses an old technique that used to be a part of this article. It had some cleverness, but wasn't quite as good as either CSS technique now presented above.

Other Resources

• jQuery plugin: Vegas, by Jay Salvat