Multiple background images IE8

Question

Is there any jquery plugin (or any other way) to force IE8 to show multiple background images?

Solution 1

CSS3 Multiple Backgrounds for Internet Explorer and legacy Mozilla Firefox

This library brings support for multiple background images to Internet Explorer 6-8 and Firefox <=3.5 by reading the CSS code from style and link tags.

CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property.

http://plugins.jquery.com/project/multiple-bg

Example Usage

Including the Script

All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 8.7kB!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiple-bgs.js"></script>

Writing the CSS

Multiple backgrounds using the background property are read using this Javascript library. Notice how hover and active states are supported.

#ex1 {
    background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right.gif) no-repeat 100% 0, 
                url(middle.gif) repeat-x 0 0;
}
#ex1:hover {
    background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-hover.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-hover.gif) no-repeat 100% 0, 
                url(middle-hover.gif) repeat-x 0 0;
}
#ex1:active {
    background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-active.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-active.gif) no-repeat 100% 0, 
                url(middle-active.gif) repeat-x 0 0;
}

Solution 2

CSS3 PIE might do what your looking for CSS3 PIE

Solution 3

If it is not more than 3 images as background, you can play around the :before and :after in the css. See this link for example.

You may need to add the following in the head though if you want ie7 to behave as well:

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>