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

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.

Más tutoriales de HTML

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

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