Is there any jquery plugin (or any other way) to force IE8 to show multiple background images?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With