
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.
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!




Por ahora hay 5 comentarios ¿Quieres opinar?
Muy buena función me vendra biaen para algunos baners de información.
Saludos.
En el caso de que un fondo se superponga con otro, quedan por arriba en el orden que los pusimos?
@Daniel Costas exacto, quedan en el orden que los pusimos.
Un saludo.
ya la estoy usando y es muy fasil
[...] Multiples fondos (backgrounds) [...]