Multiple background images IE8

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

Answers


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

CSS3 PIE might do what your looking for CSS3 PIE


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>

Need Your Help

Is Babel a compiler or transpiler?

javascript ecmascript-6 babel

I've been using Babel for a while now, and I've always been under the impression that Babel was a transpiler for converting my ES6 and ES7 JavaScript into ES5 JavaScript, as I was under the assumpt...

Java getting my IP address

java ip wifi

I am trying to get my Internet IP address in Java but I keep getting my local address (ie: 127.0.0.1), when my IP address is 192.168.0.xxx