Браузърите, които поддържат множество фонове (WebKit от най-ранните дни, Firefox 3+) използват синтаксис като този:
#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )
Те са стойности, разделени със запетая, и може да има колкото искате с различни стойности на URL, позициониране и повторение. Можете дори да комбинирате градиенти WebKit в комбинацията:
#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)); )
Old School IE на Mac ще покаже първия фон в списъка, но други браузъри, които не го поддържат, се провалят силно и просто не показват никакъв фон. Това го прави труден случай за прогресивно подобрение. Това е, освен ако не използвате инструмент като Modernizr, за да откриете поддръжка за него и да напишете резервен селектор, който декларира само един фон за браузъри, които не го поддържат.