CSS background image stretch

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!

Share this post!

Tags: , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. Joseph McCullough on March 9, 2010

    Can you use margin: 0px auto and position: relative in the same CSS?

  2. Cre8ive Commando on March 9, 2010

    @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 :-)

  3. Ben on April 2, 2010

    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.

  4. Ben on April 4, 2010

    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

  5. Cre8ive Commando on April 5, 2010

    @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. :-)

  6. Shanna on July 13, 2010

    Thanks! Very helpful! Simple and clean coding.

  7. Tanveer Hayat on August 4, 2010

    hey very nice adham !
    i just got through ur portfolio and then the blog !

    very nice impressed

    regards

  8. breisa on November 11, 2010

    Worked like a charm!
    Thank you so much! :D

    I admire your works btw.
    keep it up!

    ~breisa

  9. Hannah on January 11, 2011

    Thank you so much! Easy to follow and works perfect! I wish every answer to my problems were like this one!

  10. Nick on March 9, 2011

    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!

  11. saysa on May 17, 2011

    ur code working fine for div but i want to make background image of body tag stretched…. its not working for that :( plz help

  12. tripnixon on June 17, 2011

    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…

  13. tripnixon on June 17, 2011

    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

  14. MP on July 18, 2011

    Forget CSS when it comes to image stretching in IE6!

    Image stretching with no quality loss in IE6 is done like this…

  15. Gatis on November 28, 2011

    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?

  16. Louis-Rémi on December 5, 2012

    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

Trackbacks

  1. [...] CSS background image stretch | Cre8ive Commando [...]

  2. [...] Here is the original: CSS background image stretch [...]

  3. [...] here to read the rest: CSS background image stretch | Cre8ive Commando Share and [...]

  4. [...] you entertained and even give you the answer: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm http://www.cre8ivecommando.com/css-b…-stretch-1786/ __________________ These forums are as good as the posts that you contribute to them.~~ [...]


Have your say!