CSS3 multiple backgrounds across selectors

DaiYoukai is right, CSS3 multiple image backgrounds - can not be used across selectors.

Workaround: you can use CSS3 Content feature - it virtually create additional element.

CSS

.icon{
    background-image: url('../img/icons/icon.png');
    width:16px;
    height:16px;   
}
.icon.add:after {/* new virtual layer */       
    background-image: url('../img/icons/icon_add.png');
    content: "";
    display: block;
    position: absolute;
    width:16px;
    height:16px;
}

Note: Modern browsers correctly supports both CSS3 features, except IE:

  • CSS3 multiple backgrounds - from IE9.
  • CSS3 Content - from IE8.

It is my understanding that CSS3 multiple image backgrounds are only possible in the same declaration.

http://www.w3.org/TR/css3-background/#layering

Tags:

Html

Css