07

11

Múltiples imágenes de fondo

Tradicionalmente solo hemos podido establecer un fondo por cada elemento, pero con la llegada de CSS3 podemos añadir varias imágenes de fondo a un elemento, sin tener que anidar uno dentro del otro.
Para usar este método debemos de separar los diferentes fondos con comas (","), siendo idéntico que el background de siempre, respetando las mismas propiedades. En el ejemplo que os muestro solo hay una DIV, con varias imágenes de fondo que se mueven al pasar por encima.

Como he dicho antes, podemos establecer varios fondos (con sus distintas propiedades como URL, posición, repetición...) y añadirlos todos juntos, separados por comas y teniendo en cuenta que el primero es el que más adelante saldrá y el último que añadamos estará en el fondo.

1. div.fondo {

background: [URL] [Repetición] [Desplazamiento],

[URL] [Repetición] [Desplazamiento];

2. }

Como funciona el ejemplo

Al pasar por encima del ejemplo se desplazan los elementos ofreciendo otra perspectiva y dando la sensación de profundidad, simplemente cambiando las distancias de los elementos (el más fondo de la oficina se mueve en sentido opuesto a la silla y la mesa, que se mueven a distintas distancias) y para hacer el efecto más suave he añadido transiciones, podéis ver el código con el background:

1. div.fondo {

background: url(mesa.png) no-repeat 20px 162px,

url(silla.png) no-repeat 110px 170px,

url(fondo.png) -40px;

2. }
4. div.fondo:hover {

background: url(mesa.png) no-repeat -40px 162px,

url(silla.png) no-repeat 70px 170px,

url(fondo.png) -70px;

5. }

¿Que puedo hacer más?

Puedes añadir en un mismo elemento tantos fondos distintos como quieras, ya pueden ser con colores sólidos (o transparentes como con RGBA o HSLA), imágenes o las dos juntas, de esta forma podemos añadir todas las imágenes que queramos de fondo.
En este ejemplo pondré dos fondos, el que aparecerá en el fondo será la imagen de la oficina del primer ejemplo y encima el logo de Xitrus.

1. #Xitrus {

background: url(Xitrus.png) no-repeat center,

url(fondo.png) center;

2. }