Hace un rato westest publico el posible uso de los fondos multiples en el post de un usuario, seguido a esto Siqui y martin comentaron que si podia poner un tutorial sobre esto, y bueno me le adelante un poco espero no se enoje (xD).
Una nota importante de este tuturial es que solo funciona con navegadores actualizados, como chrome, firefox y safari. Desconosco si funciona en Opera y como es de esperarse, no funciona en ninguna versión de IE
Como sabemos en css para poner múltiples fondos de imágenes teníamos que recurrir a 3 divs y 3 estilos diferentes:
<div id=”mifondo”>
<div id=”mifondo2”>
<div id=”mifondo3”>
Lo que sea
</div>
</div>
</div><style type="text/css">
#mifondo{
Estilo
}
#mifondo2{
Estilo
}
#mifondo3{
Estilo
}
</style>Pero ahora con css3 nos podemos ahorrar unas cuantas líneas de código tanto en el css como en los div que están “de más”:
<div id=”mifondo”>
Lo que sea
</div>Y el css
<style type="text/css">
#mifondo{
background: url(mifondo1.png) bottom no-repeat,
url(mifondo2.png) right no-repeat,
url(mifondo3.png) center repeat;
}
</style>Usamos las propiedades URL, bottom, right, no-repeat, center y repeat.
URL: la usamos para indicar en enlace de nuestra imagen que queremos como fondo.
Bottom, right y center es para definir la posición en la que se ve nuestro fondo si es un div pequeño o con un tamaño definido, por ejemplo si yo quiero que solo se vea la parte del centro de nuestro fondo, usamos center.
No-repeat es para indicar que nuestro fondo no se va a repetir.
repeat Es para indicar que nuestro fondo se va a repetir.
También usamos una
, después de cada fondo, esto es para indicarle al navegador que estamos usando un fondo nuevo después del primero, es muy importante usarlas pues de lo contrario nuestro css nos dará error y no se visualizará correctamente.
Como ven la última línea del css no termina con
, si no con
; esto creo que queda de más, pero es para cerrar el estilo
El orden de las imágenes se muestran según el orden que tienen en el css, en este caso la imagen que estaría detrás de las demás sería “mifondo3.gif” y la imagen que estaría delante de todas “mifondo1.png”
Si tienen dudas no se las guarden, pregunten
