Browser, die mehrere Hintergründe unterstützen (WebKit von Anfang an, Firefox 3+), verwenden eine Syntax wie die folgende:
#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )Es handelt sich um durch Kommas getrennte Werte, und es können beliebig viele Werte mit unterschiedlichen URLs, Positionierungs- und Wiederholungswerten vorhanden sein. Sie können sogar WebKit-Verläufe in der Mischung kombinieren:
#box ( background: url(… /images/arrow.png.webp) 15px center no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); )Der IE der alten Schule auf dem Mac zeigt den ersten Hintergrund in der Liste an, aber andere Browser, die ihn nicht unterstützen, schlagen schwer fehl und zeigen nur keinen Hintergrund an. Dies macht es schwierig, eine schrittweise Verbesserung vorzunehmen. 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.