There are still a decent percent of browsers out there on the increasingly-antiquated Internet Explorer version 8.
So while upgrading a site recently to an all-CSS based design, we wanted to continue to support IE8 and needed multiple background images on a single element using CSS.
This post was the most elegant explanation I found.
For future reference, here is the magic:
HTML
<div class="container">
I need 3 backgrounds!
</div>
We are going to apply multiple backgrounds in IE8 to this div.container by using the :after and :before psuedo classes in IE8.
CSS
.container {
background-color: #eee; // A light gray
height:200px;
}
.container:before {
content: '';
background-color: #3c3c3c; // A medium dark gray
width: 100%;
height: 30px;
top: 0px;
display: block;
z-index: 1;
position: relative;
}
.container:after {
content: '';
background-color: #000; // Black
width: 100%;
height: 10px;
top: 0px;
display: block;
z-index: 1;
position: relative;
}