Varias imágenes de fondo con CSS3

Publicado el en la categoría Diseño y Programación

CSSSi 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:

Varias imágenes de fondo con CSS3

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.

Facebooktwittergoogle_plus