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