Con CSS2 solo podíamos tener una imagen de fondo por cada elemento. Pero todo evoluciona y ahora con CSS3 podemos aplicar varias imágenes de fondo en un mismo elemento. Para ello debemos aplicar este código:
background: url(fondo1.gif) top left no-repeat, url(fondo2.jpg) top 11px no-repeat, url(fondo3.gif) bottom left no-repeat, url(fondo4.gif) left repeat-y;
Si nos fijamos es una única propiedad background pero con una dirección por cada fondo, cada una separada por una coma.
Por ahora los únicos navegadores que pueden implementar esta técnica son WebKit (Safari) y KHTML (Konqueror). Pronto estará soportada por la mayoría de navegadores, así que no os preocupéis.
Podemos ver un ejemplo de su funcionamiento.
