CSS3 Multiple Backgrounds for Internet Explorer and legacy Mozilla Firefox

Updated November 17, 2010

Have you been using wrapper DIVs to achieve rounded corners in your designs? Do you wish you could use CSS3 multiple backgrounds and stop inflating your markup? You can, using this jQuery library. Multiple backgrounds have been supported by Webkit-based browsers like Safari and Chrome for a long time. Firefox only recently implement them in version 3.6. Of course, Internet Explorer has never supported multiple-backgrounds. This library brings support to Internet Explorer and Firefox by reading the CSS code from style and link tags.

CSS3 introduced the ability for multiple backgrounds on elements. Using this new feature is very simple; simply place each background like you normally would and separate them with commas. CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property. The W3C provides information about multiple backgrounds.

1. Browser Support
2. Example Usage
3. Demo
4. Public Functions
5. Change Log
6. Known Issues
7. Download

Browser Support

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

Demo

View More...

Public Functions

These are only required if you need to change the rules that are applied or apply the rules again (when loading DOM through AJAX for example).

$.fn.multipleBgReadCss(conts,prop,path)

Read in a block of CSS while looking for a multiple backgrounds

• conts—block of CSS to read in
• prop—which property to look for, only 'background' supported at this time
• path—path to prepend to image urls to make relatives work, pass false or "" to disable

$.fn.multipleBgApplyCss()

Apply loaded CSS properties to the elements on this page

$.fn.multipleBgApplyBg(selector,attr)

Apply a specific background to a selector/element.

• selector—selector/element to apply the background to
• attr—which state of the element to apply (Possible values: jQueryMultipleBgStaticSelector, jQueryMultipleBgHoverSelector, jQueryMultipleBgActiveSelector, jQueryMultipleBgFocusSelector)

$.fn.multipleBgRules

Access the loaded rules from initialization/add your new rules to this object

Change Log

101117

• Fixed use of things like @charset "utf-8"; in CSS files.

101021

• Many general bug fixes since last update
• CSS used for multiple backgrounded input fields has changed to not require a Firefox line height fix
• Code cleaned up so the YUI JS compressor now works properly

100804

• Added support for -moz-border-radius for inputs with multiple BGs
• Commas inside of parentheses inside background values now work (e.g. RGBA)

100728

• Fixed relative paths from remote CSS files. Now paths are not just relative to the document.
• Now also supports multiple selectors for one CSS rule.

100727

• Tested with many elements. I ran a profiler in IE and both 7/8 were pretty close to the same speed and proportional to the number of layers applied as all the time was spent in DOM manipulation in the addLayer function. IE took about 1000ms to load 228 layers onto a modified version of this example.
• Line height fixed on Firefox <=3.5 by adding padding-top to center the text vertically based on the height CSS property.

100726

• Added selector precedence (including !important)
• The number of multiple backgrounds may change in each state/class
• input elements have wrappers on the outside now
  • CSS properties passed through to wrappers: margin, display, position, top, left, right, bottom, float, clear, z-index^{(added 100727)}, -moz-border-radius^{(added 100804)}
• :focus psuedo-class support added

Known Issues

• jQuery 1.4.3 will cause layout errors in Internet Explorer 6 and 7. Default to 1.4.2 instead.
• Doesn't support inline styles—only style and link tags
• If you add more backgrounds in a :focus psuedo-class than on the static class, IE will require a second click (not double-click) to put the focus on the input.
• Input fields must be display:block and have a set width.

Download

jquery.multiple-bgs.zip (25.5kB) - Package containing this document, example images, source code, minified library