Los navegadores que admiten múltiples fondos (WebKit desde los primeros días, Firefox 3+) usan una sintaxis como esta:
#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )Son valores separados por comas y puede haber tantos como desee con diferentes URL, posicionamiento y valores de repetición. Incluso puede combinar degradados de WebKit en la mezcla:
#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)); )El IE de la vieja escuela en Mac mostraría el primer fondo de la lista, pero otros navegadores que no lo soportan fallan y simplemente no muestran ningún fondo. Esto lo convierte en un caso difícil para la mejora progresiva. Es decir, a menos que use una herramienta como Modernizr para detectar el soporte y escriba un selector de respaldo que solo declare un fondo para los navegadores que no lo admiten.