Using two background images for one div in IE

Posted on March 16th, 2011 in CSS, HTML.

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 section of your web page to reference the stylesheet:

<code><!--&#91;if IE&#93;>         <link rel="stylesheet" type="text/css" href="iestyle.css" /> <!&#91;endif&#93;--></code>

(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;
}

What we are going to do is create a new div which will display inside the initial div if the site is being viewed in IE.

Open your iestyle.css file. Add the CSS codes for the new div:

.node-second {
color: #789F4D;
width:220px;
border: 1px solid grey;
background: url(images/topbg.jpg) no-repeat right bottom;
 }

You will also have to add and then rewrite the styles for the original div in the IE stylesheet:

.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

Now, simply set up the new div inside the initial div in your HTML.

<div class="node">
<div class="node-second">
Content here. Content here.
</div>
</div>

What this does is adds the second div inside the original div in the HTML page. The styles for both divs are determined by which browser the website is being viewed in:

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

I hope this works for you. As always, just let me know if you have any questions!

Disable Gutenberg for specific post types

MENU