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
Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!
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
Worked like a charm!
Thank you so much! 😀
I admire your works btw.
keep it up!
~breisa
Thank you so much! Easy to follow and works perfect! I wish every answer to my problems were like this one!
Can’t wait to try this out on the development of my new site. Debating whether or not to use a BG image or not. Regardless, it will be used on another project if not used on my own site. I’ll keep you posted on the outcome. Thanks a bunch for sharing your knowledge with the world!
ur code working fine for div but i want to make background image of body tag stretched…. its not working for that 🙁 plz help
Thanks for this tip. In IE 8 it is either irrelevant or needs some tweaking. Of course, I will share when I get this squared.
Sigh, why bother with CSS/HTML standards when every browser will just break the rules…
The following worked for me; also across browsers (IE, FF, Ch, Op) on Windows or Mac:
html, body { margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;margin: auto;}
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index: -1;}
#content {position:static;}
Blah Blah
Forget CSS when it comes to image stretching in IE6!
Image stretching with no quality loss in IE6 is done like this…
If you put flash content on top of this stretched background-image, then whole site starts to lag (more in IE). You think there’s some solution to avoid that?
In modern browsers you can use the CSS3 property background-size: cover; or background-size: cover to achieve background stretching while preserving the aspect ratio of the background-image: https://developer.mozilla.org/en-US/docs/CSS/background-size
I’ve personally developed a polyfill that implements those properties in IE8: https://github.com/louisremi/background-size-polyfill