Sunday March 7, 2010 
Sometimes when creating a website you will need the background image of the site to stretch to fill the whole browser window. Below is a simple CSS based method to achieve a 100% stretched background image that fills the browser window and also dynamically re-sizes when the browser window is re-sized. The background image won’t maintain its aspect ratio, but it will fill the browser window at all times. It works in IE6 along with the other main browsers.
Here’s the CSS:
Here are the styles you will need to add to your style sheet. We basically just fix the background image to the top left of the browser and give it 100% width and height to fill the screen. Your content is positioned relatively above the image.
<style type="text/css">
html, body {height: 100%; margin: 0; padding: 0;}
#background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
Here’s the HTML:
Now we just need to add our background image to our HTML under the body tag like so. It should be above the content of your site.
<body> <img id="background" src="background-image.jpg" /> <div id="content">Your website content goes here ...</div> </body>
And the IE6 fix:
Of course IE6 is going to give us problems so we need to put in a style fix for IE6 into the header of our site like so. And that’s it, it’s all done. Now we have a background image that stretches to fill the browser and best of all, it even works in IE6!
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#background { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
Adham Dannaway
Yep, that's me. I'm an all round web designer and developer from Sydney, Australia with a passion for design, branding, blogging, WordPress and chewing gum. Check out my portfolio or follow me on twitter!
Can you use margin: 0px auto and position: relative in the same CSS?
@Joseph – You can if you like. But if you are trying to centre your website on the page another alternative to “margin:auto;” is:
position: relative;
left: 50%;
margin-left: -480px;
(assuming your webpage content is 480px X 2 = 960px)
Btw, nice work on your new website design. Very sleek
Hi mate,
Thanks for the tip. Works great in every browser except when I try to preview it in internet explorer 8 it doesn’t display the background at all. Does the IE 6 fix work for 8 as well? Am i doing something wrong, I put the fix in right above and doesn’t help.
Yeah so, turns out it DOES work in IE8. My bad… now im having issues trying to make the dropshadow transparent like the one on this site. FML
@Ben – The IE6 fix is only for IE6. IE8 should work fine.
To create a drop shadow bg image simply create your image in Photoshop and save it as a PNG with transparency enabled. Transparent PNG’s won’t of course work in IE6 so you will need to apply a PNG fix.
Hope that helps.
Thanks! Very helpful! Simple and clean coding.
hey very nice adham !
i just got through ur portfolio and then the blog !
very nice impressed
regards