I browser che supportano più sfondi (WebKit fin dai primi giorni, Firefox 3+) utilizzano una sintassi come questa:
#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )Sono valori separati da virgola e possono essercene quanti ne desideri con URL, posizionamento e valori di ripetizione diversi. Puoi persino combinare i gradienti WebKit nel mix:
#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)); )IE vecchia scuola su Mac visualizzerebbe il primo sfondo nell'elenco, ma altri browser che non lo supportano falliscono e non visualizzano semplicemente nessuno sfondo. Questo lo rende un caso difficile per un miglioramento progressivo. Cioè, a meno che non si utilizzi uno strumento come Modernizr per rilevarne il supporto e scrivere un selettore di fallback che dichiara solo uno sfondo per i browser che non lo supportano.