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.
Sigue la onda...
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
40 plantillas CSS y XHTML gratis y de alta calidad »
28 tutoriales de poderosos efectos de luz con Photoshop »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Excelentes diseños de logos minimalistas »
Speaky (4)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
drakkar (2)
Gil Peñaloza (2)
niconectado (2)
. My recent post Pack de 100000 tipografías...
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) [...]