CSS3 Multiple Backgrounds for Internet Explorer and legacy Mozilla Firefox

Discussion in 'Web Design and Development' started by ChicoWeb, Jul 20, 2010.

  1. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #1
    We just wrote an article for multiple backgrounds and CSS3. I thought I'd share it with you guys.

    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 using a custom CSS property.

    This library also brings Box-Shadow support to IE6-8. This feature was introduced in Firefox 3.1 and has been in Webkit for a long time. This library does not support Box-Shadow for legacy versions of Firefox. Box-Shadows on IE7/8 work fairly well and look almost exactly like their CSS3 counterparts. Box-Shadows on IE6 may not appear exactly in place.

    Code:
    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 it’s own property for the shorthand style background property. The W3C provides information about multiple backgrounds.

    Browser Support
    [​IMG]

    Supported CSS Properties

    -ben-background

    Code:
    -ben-background: [background #1],[background #2]...;
    The -ben-background property defines multiple backgrounds on the normal state of an element. Separate backgrounds with commas just as with the CSS3 background property. Backgrounds are applied in the order they are written; the first background is on top. If using a background color, place it on the last background.

    -ben-background-hover
    Code:
     -ben-background-hover: [background #1],[background #2]...; 
    The -ben-background-hover property defines multiple backgrounds on the hover state of an element. You cannot simply use the :hover psuedo-class due to the wrapper elements that must be used to support multiple backgrounds. Hover and active properties go in same rule as normal not :hover or :active psuedo-classes. You must have the same number of backgrounds in each property on an element. If needed, properties could include a background layer ‘none’ though.

    -ben-background-active
    Code:
     -ben-background-active: [background #1],[background #2]...; 
    
    The -ben-background-active property defines multiple backgrounds on the active state of an element. You cannot simply use the :active psuedo-class due to the wrapper elements that must be used to support multiple backgrounds.

    -ben-box-shadow
    Code:
    -ben-box-shadow: [color code] [horizontal offset] [vertical offset] [blur radius];
    The -ben-box-shadow property defines a box shadow for the normal state of an element. Background must be first and the units must be in pixels followed by: horiz offset, vert offset, and blur radius.

    -ben-box-shadow-hover
    Code:
    -ben-box-shadow-hover: [color code] [horizontal offset] [vertical offset] [blur radius];
    The -ben-box-shadow-hover property defines a box shadow for the hover state of an element. You must have a standard box shadow for a hover or active box shadow.

    -ben-box-shadow-active
    Code:
    -ben-box-shadow-active: [color code] [horizontal offset] [vertical offset] [blur radius];
    The -ben-box-shadow-active property defines a box shadow for the active state of an element.

    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.9kB!

    Code:
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="jquery.multiple-bgs.js"></script> 
    Multiple Backgrounds
    Multiple backgrounds using the -ben-background properties are read using this Javascript library. Notice how hover and active states are defined for different browsers.
    Code:
     #ex1 { background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0; /* For CSS3 Browsers */ -ben-background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0; -ben-background-hover: url(left-hover.gif) no-repeat 0 0, url(right-hover.gif) no-repeat 100% 0, url(middle-hover.gif) repeat-x 0 0; -ben-background-active: url(left-active.gif) no-repeat 0 0, url(right-active.gif) no-repeat 100% 0, url(middle-active.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, url(right-hover.gif) no-repeat 100% 0, url(middle-hover.gif) repeat-x 0 0; /* For CSS3 Browsers */ } #ex1:active { background: url(middle-active.gif) repeat-x 0 0; /* For unsupported 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; /* For CSS3 Browsers */ } 
    Demo
    [​IMG]

    Box Shadow
    Box Shadow using the -ben-box-shadow properties are read using this Javascript library. Notice how hover and active states are defined for different browsers.

    Code:
     #ex2 { box-shadow: #888 10px 10px 5px; /* CSS3 Compliant/Opera */ -ben-box-shadow: #888 10px 10px 5px; -ben-box-shadow-hover: #bbb 10px 10px 5px; -ben-box-shadow-active: #666 5px 5px 5px; -moz-box-shadow: #888 10px 10px 5px; /* Firefox */ -webkit-box-shadow: #888 10px 10px 5px; /* Webkit */ } #ex2:hover { box-shadow: #bbb 10px 10px 5px; /* CSS3 Compliant/Opera */ -moz-box-shadow: #bbb 10px 10px 5px; /* Firefox */ -webkit-box-shadow: #bbb 10px 10px 5px; /* Webkit */ } #ex2:active { box-shadow: #666 5px 5px 5px; /* CSS3 Compliant/Opera */ -moz-box-shadow: #666 5px 5px 5px; /* Firefox */ -webkit-box-shadow: #666 5px 5px 5px; /* Webkit */ } 
    Demo


    [​IMG]

    Known Issues

    1. Firefox<=3.5,IE6 compatibility doesn't support inline styles only style and link tags
    2. NO Box-Shadow support for Firefox<=3.0
    3. NOTE: I didn’t fix inline-block in IE6/Firefox 2 for this example
    4. Box-shadow doesn’t auto resize with window if it has a percent-specified width

    Download
    (18.4kB) – Package containing this document, example images, source code, minified library
     
  2. ChicoWeb thread starter macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
  3. hevih macrumors newbie

    Joined:
    Nov 7, 2014
    #3
    I didn't get it. The modern browsers use the regular background CSS propert to set multiple background, why do we need to use -ben-background? It should work in the following way: CSS3: multiple backgrounds. Also, for older versions of IE, there is PIE!
     
  4. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #4
    Sad to say, but IE6 and IE7 are pretty much in the bin and as someone else mentioned PIE is very well established in this area.
     
  5. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #5
    To be fair, this thread is four years old.
     
  6. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #6
    Hahaha! Whoops.
     

Share This Page