Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple background images IE8

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

like image 967
Diego Avatar asked Dec 16 '10 21:12

Diego


3 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

enter image description here

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;
}
like image 141
Soner Gönül Avatar answered Nov 05 '22 04:11

Soner Gönül


CSS3 PIE might do what your looking for CSS3 PIE

like image 30
splatio Avatar answered Nov 05 '22 05:11

splatio


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>
like image 28
adedoy Avatar answered Nov 05 '22 05:11

adedoy