Configurations Error(!)
+1 877 893 5257

Web Design & Development Blog

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

Multiple Backgrounds IE6-8 FF 2-3.5 FF 3.6 Opera 9.6+ Webkit
Browser Not Supported Not Supported Built-In Built-In Built-In
With Library 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 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 {
    /* 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

12 Responses to “Updated: jQuery Multiple Background Plug In”

  1. Matt Says:

    Interesting plugin, looks like just what I need. However when I include the script on my page (using ) I get an error in IE:

    Line 2904
    Exception thrown and not caught
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

  2. Akim Says:

    Hi,
    It seems this addon have a bug in MSIE. In some case multiple background does not work when before “background” style declaration there is some other style declaration.

    In practice this code does NOT work:
    .button
    {
    background: url(./images/button.gif) repeat-x 0 -29px;
    background: url(./images/button.gif) no-repeat 0 0,
    url(./images/button.gif) no-repeat 100% -58px,
    url(./images/button.gif) repeat-x 0 -29px;
    display: block; width: 150px; height: 24px; cursor: pointer; padding-top: 5px; text-decoration: none;
    }

    But this code DOES work:

    .button
    {
    /*background: url(./images/button.gif) repeat-x 0 -29px;*/
    background: url(./images/button.gif) no-repeat 0 0,
    url(./images/button.gif) no-repeat 100% -58px,
    url(./images/button.gif) repeat-x 0 -29px;
    display: block; width: 150px; height: 24px; cursor: pointer; padding-top: 5px; text-decoration: none;
    }

  3. amorek Says:

    what about support for jQuery .1.4.4 ?

  4. tom Says:

    hi
    when i use that there is a small lag until the background appears in IE 7/8
    it is not instant as at Firefox 3.6 (so when it is built-in)
    is there a way so to make the backgrounds appear in IE faster than now ?
    some tricks ?

  5. tom Says:

    somethimes IE *any version) hangs up
    don’t know why
    says that JS is executing too long and asks me to stop or not
    i have jsut one rule for the multiple backgrounds

  6. Tonttu Says:

    Can you guys get this to work when applying the backgrounds to the body? I get the same error as Matt. CSS3PIE has problems with multiple bgs and body, too.

  7. Akim Says:

    I have an interesting situation with MSIE 7. I have style declaratin like this
    .menu a:hover, .menu a.active { background: ; }
    Class “active” works normally, but pseudoclass “hover” does not work.

  8. Andre Says:

    Mine says ‘out of memory at line 7′ ine IE 7&8

  9. Braunson Says:

    Does not work in IE, no errors, nothing, using as explained, with more then 10 photos (fifteen to be exact), any ideas?

  10. Jay Says:

    Hi guys,

    I can’t get this working on a WordPress blog for love nor money – specifically within an external stylesheet.

    I’ve posted my question on Stack Overflow here http://stackoverflow.com/questions/5384207/multiple-background-images-plugin-for-internet-explorer-not-working-in-wordpress

    Can anyone help?

  11. thugsb Says:

    I don’t suppose this works with top and bottom images, instead of left and right (so the middle image is repeat-y instead of repeat-x)? It would be amazing if you you get it working so that sliding doors would work, and the height/width wasn’t initially set. (http://www.alistapart.com/articles/slidingdoors/)
    Thanks for creating it though, much appreciated!

  12. Loopo Jolling Says:

    Yeah, I mean you start off talking about wrapper divs for rounded corners and then present this as an alternative but if the width must be set then what is the point even.. I mean if we know for certain what our dimensions will be then we could just use a single image.. The whole point of wrapper divs was to make flexibly sized areas with nicer effects than plain squares, and the whole strengths of multiple backgrounds in modern browsers is again flexibility. If we must have a set width then the benefits of multi-backgrounds are virtually nullified… I swear, it’s no wonder the web is so screwed up when such smart people keep overlooking the obvious…

Leave a Reply

*