Si bien es cierto que para agregar varias imágenes, por ejemplo un fondo y una imagen por encima, debiamos crear una estructura de divs, y posicionar a todos ellos en un contenedor, ahora, y gracias a CSS3, la realización de esta tarea se ha simplificado enormemente.
La “culpa” de esto la tiene la etiqueta background image, que gracias a la nueva especificación de CSS3 nos permite agregar y posicionar varias imágenes en un mismo contenedor. Vemos un ejemplo:
El codigo HTML sera un sencillo div que hace la función de contenedor:
<div id="contenedor"> elementos dentro del div </div>
Para el CSS indicaremos en background todas las imagenes que necesitemos, separandolas por comas:
#contenedor{
background: url(imagen1.png) bottom right no-repeat,
url(imagen2.png) center no-repeat,
url(imagen3.pngf) center repeat;
width: 300px;
}
Hay que destacar que la primera imagen que se declara, será la mas cercana a nosotros, así que las siguientes imágenes se irán colocando detrás de ella.
Gracias al CSS3 y a la posibilidad de incluir imágenes en formato PNG con fondo transparente, podremos jugar con los distintos elementos gráficos, para crear una composición como esta:
la cual está formada por 3 imágenes: las nubes, el cielo degradado y las flores.
Puedes descargar el código completo, pulsando en este enlace.
