Contact Derick Montague at letschat@beyondhyper.com

CSS3 Multiple background images in Internet Explorer

Yes, finally a solution for multiple background images in IE! Well, only if you can push back on the pixel perfect design concept and promote progressive enhancement. Otherwise, that solution is IE 9, unless you want to use jQuery to to add support for IE 6-8, CSS3 Multiple Backgrounds for Internet Explorer and Legacy Mozilla Firefox

Personally, I subscribe to the progressive enhancement model. Creating a design that will look good enough in the older browsers and spectacular in those that support multiple backgrounds would be my design approach. If you’re interested in that approach as well, one thing to remember when using multiple images where one of the images is tiled (repeated), stacking order matters.

In the following example, the middle image renders above the bottom image.

Incorrect Stacking Order

#fatfooter {
   background: 
                     url('top-img.png') top no-repeat, 
                    url('mid-img.png') center repeat-y, 
                    url('btm-img.png') bottom no-repeat;
}

Correct Stacking Order

This layout order assures that the bottom and top images will render above the repeated center image. It seems foreign to format it this way, the layout order isn’t logical, but it works and it is just a small thing to remember to take advantage of the new CSS property values that allow us to code more semantically and significantly reduce code bloat.

#fatfooter {
   background:      url('mid-img.png') center repeat-y; /* for all you older browsers out there */
   background: 
                    url('top-img.png') top no-repeat, 
                    url('btm-img.png') bottom no-repeat,  
                    url('mid-img.png') center repeat-y;
}

You can also use tools like Modernizr to help the older browser degrade gracefully, if you need to take that approach. I hope this helped you work out any issues you experienced while trying to implement multiple background images using the CSS3 background property.

3 Comments to CSS3 Multiple background images in Internet Explorer

  1. LeroyV
    03/14/2012

    It would have been nice if you had a demo of what you’re talking about in this blog post. Your page is not using multiple background. I looked at the HTML and the CSS.

    Did you happen to change the markup/css or something?

    • Derick
      03/14/2012

      You’re right, I did change the markup a while after this post, but still thought it was a worthwhile post. Thanks for taking the time to read it!

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>