Updated: jQuery Multiple Background Plug In

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

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="https://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 {
    /* For unsupported browsers */
    background: url(middle.gif) repeat-x 0 0; 
    /* For CSS3 Browsers */
    background: url(left.gif) no-repeat 0 0, 
                url(right.gif) no-repeat 100% 0, 
                url(middle.gif) repeat-x 0 0;
}
#ex1:hover {
    /* For unsupported browsers */
    background: url(middle-hover.gif) repeat-x 0 0; 
    /* For CSS3 Browsers */
    background: url(left-hover.gif) no-repeat 0 0, 
                url(right-hover.gif) no-repeat 100% 0, 
                url(middle-hover.gif) repeat-x 0 0;
}
#ex1:active {
    /* For unsupported browsers */
    background: url(middle-active.gif) repeat-x 0 0; 
    /* For CSS3 Browsers */
    background: url(left-active.gif) no-repeat 0 0, 
                url(right-active.gif) no-repeat 100% 0, 
                url(middle-active.gif) repeat-x 0 0;
}

Demo/Documentation

View the demo on the demo/documentation page.

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. The input’s height and line-height CSS properties should be equal. The vertical padding positions the caret in the box.

Download

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