Syntax für mehrere Hintergründe

Browser, die mehrere Hintergründe unterstützen (WebKit seit den Anfängen, Firefox 3+), verwenden eine Syntax wie diese

#box {
  background: 
    url(icon.png) top left no-repeat, 
    url(texture.jpg), 
    url(top-edge.png) top left repeat-y;
}

Es handelt sich um durch Kommas getrennte Werte, und es können beliebig viele mit unterschiedlichen URLs, Positionierungen und Wiederholungswerten sein. Sie können sogar WebKit-Verläufe in die Mischung einbeziehen

#box {
	background: 
		url(../images/arrow.png) 15px center no-repeat,
		-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

Das alte IE auf dem Mac zeigte den ersten Hintergrund in der Liste an, aber andere Browser, die es nicht unterstützen, versagen komplett und zeigen keinen Hintergrund an. Das macht es schwierig für progressive Enhancement. Das heißt, es sei denn, Sie verwenden ein Tool wie Modernizr, um die Unterstützung dafür zu erkennen und einen Fallback-Selektor zu schreiben, der nur einen Hintergrund für Browser deklariert, die ihn nicht unterstützen.