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.

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.

  1. Browser Support
  2. Example Usage
  3. Demo
  4. Public Functions
  5. Change Log
  6. Known Issues
  7. 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 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

Blog Posting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis neque vel eros sagittis congue sed sed mauris. In vitae purus dui, sed tincidunt libero. Pellentesque eget libero id metus dictum sodales. Proin a vestibulum lorem. Etiam ut accumsan libero. Etiam dolor tellus, viverra vitae sodales non, sagittis ut urna. Ut nec dui mauris, non facilisis erat. Morbi cursus sem ac erat tincidunt quis facilisis nunc volutpat. Fusce bibendum, risus et condimentum bibendum, risus erat imperdiet leo, vel iaculis massa lacus nec quam. Aenean adipiscing lectus sit amet magna dapibus sit amet commodo diam vulputate. In risus elit, condimentum rutrum feugiat a, convallis et nibh. Nulla fringilla, neque non tempor eleifend, ipsum nunc scelerisque erat, sit amet auctor augue tellus non mi. Morbi eu malesuada dolor. Vivamus sed dignissim urna. Vestibulum ut mattis lacus. Donec gravida facilisis mi, nec imperdiet mauris elementum at. Suspendisse pellentesque sodales neque tincidunt auctor.

View More... More Postings...

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

$.fn.multipleBgApplyCss()

Apply loaded CSS properties to the elements on this page

$.fn.multipleBgApplyBg(selector,attr)

Apply a specific background to a selector/element.

$.fn.multipleBgRules

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

Change Log

101117

101021

100804

100728

100727

100726

Known Issues

Download

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