Cómo conseguir que un elemento de la página tenga varias imágenes de

fondo a la vez, con CSS.

Con el atributo background-image podemos conseguir que un elemento de la página tenga un fondo de
imagen. Colocar varias imágenes de fondo a un elemento en principio no se puede con CSS, por lo que
mostraremos cómo hacerlo con una sencilla técnica alternativa.

En CSS normal (CSS 1), como hemos dicho, podemos colocar un único fondo a un elemento de la
página. Esto es algo soportado por todos los navegadores. Como no podemos poner más de 1 fondo por
elemento, para colocar varios fondos al mismo tiempo, tenemos que utilizar varios elementos. A cada
elemento le colocaremos un único fondo, pero al mostrarse los elementos en el mismo espacio, conseguiremos
el efecto deseado de tener varios fondos de imagen a la vez.

En nuestro caso, vamos a utilizar varias capas DIV anidadas y cada una tendrá su fondo de imagen.

El código HTML que utilizaríamos para anidar varias capas DIV sería como sigue:

<div id="fondo1">
<div id="fondo2">
<div id="fondo3">
contenido del elemento que va a tener 3 fondos de imagen distintos
...
</div>
</div>
</div>

Como se ha visto, podemos anidar varias capas DIV y cada una tendrá un identificador, o si lo
preferimos una clase, para asignar estilos por CSS. Al estar anidados, todos los elementos DIV se mostrarán
uno encima del otro.

Ahora veamos el código CSS para darle fondos a cada uno de estos elementos DIV:

<style type="text/css">
#fondo1{
background-image: url(fondo1.gif);
width: 300px;
}
#fondo2{
background-image: url(fondo2.png);
background-repeat: no-repeat;
background-position: bottom right;
}
#fondo3{
background-image: url(fondo3.png);
background-repeat: no-repeat;
background-position: center;
}
</style>

Los fondos se superpondrán unos a otros, siendo el fondo1 el que se vea más abajo y el fondo3 el que se
verá más arriba.

1
 El resultado de este ejemplo se puede observar de la siguiente forma:

En principio todos los navegadores visualizarán perfectamente los fondos, pero como he utilizado
imágenes transparentes en formato PNG e Internet Explorer 6 tiene problemas con la transparencia de los
archivos PNG, podemos encontrar algún defecto, pero los fondos de los elementos DIV se verán.