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.
Step 1
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 <head> section of your web page to reference the stylesheet:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="iestyle.css" /> <![endif]-->(For more information on conditional stylesheets, you can read this article – http://css-tricks.com/how-to-create-an-ie-only-stylesheet).
Step 2
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.
Step 3
<div class="node"> <div class="node-second"> Content here. Content here. </div> </div>
- If the browser is Mozilla or Chrome, etc., the div uses the CSS trick we covered in the previous post and displays two background images.
- If the browser is Internet Explorer, the div uses the styles in our iestyle.css file and still displays two background images (one of which is contained in the new div).
Hi Libby,
Thanks a lot! Works great!
I want to use this: http://www.designfestival.com/cicada/break-it-down/?id=80 – works with 3 background images – but, of course, not in IE.
Using your solution, I added this to my IE.css:
(I realize I could have put 2 backgrounds together in 1 element, but I thought this would be clearer):
html{font-size:100%;
min-height:101%;
background-color: #99161c;
background: url(../../pictures/test/tuscany_base.jpg);
}
div-IE-1{
background: url(../../pictures/test/tuscany_mid.png)
}
div-IE-2{
background: url(../../pictures/test/tuscany_high.png)
}
Now in my html, I just wrap those 2 empty divs around my main content:
...
< body >
< div id="div-IE-1" >
< div id="div-IE-2" >
...
< /body >
Spent/wasted some time on looking for a solution, but yours is easiest.
Thanks again!
Hi,
Thanks for letting me know, I am really glad to hear it worked for you!
[...] Note: To make sure that your site is cross-browser compatible, make sure that you also use this IE fix to display two background images in one div in Internet Explorer. [...]
please canu give me a simple sample page….. im trying the way u said for more than two days now…. im running out of time also…. i still dont understand how u have done this…. please help me with a simple sample page im getting frustrated now…….
Hi,
Please send me a link to the page you are working on either here in the comments or at my email address – libby@thelibzter.com – and I can take a look at what you have so far.
Thanks!
thats awesome…worked like a charm