This post is an extension of my previous post on how to use two background images for one div. However, the CSS trick we covered will not work correctly in Internet Explorer (no surprise there, right? 🙂 ). Here is one way that I have used to work around that.
First things first, if you are not using a separate stylesheet for IE, do so now. Create the new stylesheet, save it as iestyle.css (or whatever you want it to be called), and then use this line of code in the section of your web page to reference the stylesheet:
<code><!--[if IE]> Â Â Â Â <link rel="stylesheet" type="text/css" href="iestyle.css" /> <![endif]--></code>
(For more information on conditional stylesheets, you can read this article – http://css-tricks.com/how-to-create-an-ie-only-stylesheet).
Now, let’s say these are the CSS codes for the div that we are using two background images for:
.node { color: #789F4D; width:220px; border: 1px solid grey; padding:10px; background: url(images/topbg.jpg) no-repeat left top, url(images/background.jpg) no-repeat right bottom; background-color:#f6f6f2; }
.node-second { color: #789F4D; width:220px; border: 1px solid grey; background: url(images/topbg.jpg) no-repeat right bottom; }
.node { color: #789F4D; width:220px; background: url(images/background.jpg) no-repeat left top; background-color:#f6f6f2; }
Notice the biggest difference here is that, in the IE stylesheet, the original div only has one background and the second div contains the second background. The idea is that, if the website is being viewed in Internet Explorer, the two images will be in their own divs (the only way to make them both display, that I know of), but you want the two divs to be styled in such a way that the affect will be exactly the same as when the site is viewed in Mozilla or another browser.
<div class="node"> <div class="node-second"> Content here. Content here. </div> </div>