Múltiples imágenes de fondo con CSS

Con el atributo background-image podemos conseguir que un elemento de la página tenga un fondo de imagen. Esto debemos saberlo, puesto que es algo básico de las hojas de estilo en cascada (CSS). Pero en este artículo de DesarrolloWeb.com vamos a mostrar cómo podríamos conseguir que un elemento de la web tuvisese varias imágenes de fondo al mismo tiempo. 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. Pero también veremos que en CSS 3 existe la posibilidad de configurar varios fondos al mismo tiempo en un elemento, con una declaración de background-image y sin necesidad de realizar ningún tipo de 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.

El resultado de este ejemplo se puede ver en una página aparte.

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.

Colocar varios fondos de imagen a un elemento con CSS 3

Una de las nuevas características de CSS 3 consiste en la posibilidad de declarar varios fondos de imagen a un elemento de la página. Lo que antes hemos visto que es posible, creando varios elementos anidados y colocando un fondo en cada uno, se puede hacer en CSS 3 con un solo elemento, al que aplicaremos varios fondos distintos.

El HTML del ejemplo de varias imágenes de fondo sería el siguiente:

<div id="fondos">
   texto de un único elemento
   ...
</div>

Ahora veamos el CSS 3 válido para este ejemplo:

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

Sólo cabe comentar que las distintas imágenes de fondo se tienen que escribir en la declaración CSS separadas por comas. Además, las imágenes que declaramos se van colocando de modo que la primera aparece sobre las siguientes. Así pues, en esta declaración, fondo1.gif, que está colocada como último fondo, es la que aparece detrás del todo.

De momento, la posibilidad de incluir varios fondos de imagen a un elemento sólo está disponible en el navegador Safari, pero esperemos que pronto otros navegadores vayan incorporando esta funcionalidad de CSS 3.

Este ejemplo se puede ver en una página aparte.