Varias imágenes de fondo en un mismo Div

Varias imágenes de fondo en un mismo Div

Varias imágenes de fondo en un mismo Div

En este tutorial aprenderemos cómo podemos colocar varias imágenes de fondo superpuestas en un mismo div, con html y css, anidando elementos.

Cada imagen en un div diferente

Crearemos varios divs en cascada donde meteremos las diferentes imágenes

Veamos un ejemplo

<div id="fondos">
    <div id="fondo1">
        <div id="fondo2">
            <div id="fondo3">
              //Contenido del elemento
            </div>
        </div>
    </div>
</div>

Al estar anidados, los elementos Div se mostrarán uno encima de otro

Veamos el código CSS

<style>
    #fondos {
        width: 500px;
        height: 350px;
    }
    #fondo1 {
        width: 100%;
        height: 100%;
        background-image: url(imagen1.jpg);
        background-size: 100%;
    }
    #fondo2 {
        width: 100%;
        height: 100%;
        background-image: url(imagen2.jpg);
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 35%;
    }
    #fondo3 {
        width: 95%;
        height: 90%;
        background-image: url(imagen3.jpg);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 60%;
    }
</style>

El resultado sería algo como

Varias imágenes de fondo en un mismo Div
Resultado ejemplo

 

Un div para todas las imágenes

Podemos colocar todas las imágenes en un mismo div utilizando CSS3

<!--Creamos un único div en el archivo Html-->
<div id="fondos">
</div>

Aplicamos las propiedades CSS

<style> 
#fondos {
        width: 500px;
        height: 350px;
        background-image: url("imagen3.jpg"), url("imagen2.jpg"), url("imagen1.jpg");
        background-size: 60%, 35%, 100%;
        background-repeat: no-repeat, no-repeat, repeat;
        background-position: bottom right, bottom left, left top;
        }
</style>

Hay que tener en cuenta el orden de las imágenes. La última que agregamos es la que quedará más abajo dentro del div, y la primera será la que quedará por encima.

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas