New Version Available! Updated October 21, 2010

Updated July 29, 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.

background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0;

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.

Browser Support
Example Usage
View Demo
Public Functions
Change Log
Known Issues
Download

Browser Support

Multiple Backgrounds	IE6	IE7	IE8	FF 2	FF 3	FF 3.5	FF 3.6	Opera 9.6+	Webkit
Browser	Not Supported	Not Supported	Not Supported	Not Supported	Not Supported	Not Supported	Built-In	Built-In	Built-In
With Library	Supported	Supported	Supported	Supported	Supported	Supported	Built-In	Built-In	Built-In

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 9.6kB!

<script type="text/javascript" 
           src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/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;
}

View Demo

View the demo on the demo/documentation page.

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

$.fn.multipleBgFixFFLineHeight()

Reads the height CSS property on this element and centers the text vertically by setting the padding-top value.

Example 1: Apply to all text input fields on page.

 $("input[type=text]").each($.fn.multipleBgFixFFLineHeight);

Example 2: Apply to a specific field.

 $.fn.multipleBgFixFFLineHeight.call(myInputToFix);

Change Log

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)}
:focus psuedo-class support added

Known Issues

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.
URLs to images must be relative to document as styles become inline in the translation.
Input fields must explicitly have type=”text” to be picked up by the Firefox input line height fix function.

Download