¿Cómo poner una imagen sobre otra en HTML? Las 3 posibles soluciones

hace 2 años · Actualizado hace 1 año

En este tutorial te voy a explicar como puedes poner una imagen encima de otra usando HTML y CSS. Para ello, te voy a explicar las tres soluciones más habituales que hay, dependiendo de cuales sean tus preferencias.

Índice

Opción 1: Usando el atributo position: relative
Opción 2: usando la propiedad background-image
Opción 3: utilizando flexbox y la propiedad z-index

Opción 1: Usando el atributo position: relative

Primero, crea un archivo HTML y escribe la estructura básica del documento:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Imágenes superpuestas</title>
    <style>
        /* Escribe aquí tu código CSS */
    </style>
</head>
<body>
    <!-- Escribe aquí tu código HTML -->
</body>
</html>

Luego, dentro de la etiqueta <style>, escribe el siguiente código CSS:

/* Contenedor para las imágenes */
.container {
  position: relative;
  display: inline-block;
}

/* Estilo para la imagen de fondo */
.background-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Estilo para la imagen superior */
.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
}

Después, dentro de la etiqueta <body>, agrega el siguiente código HTML:

<div class="container">
  <img src="ruta_de_tu_imagen_de_fondo.jpg" alt="Imagen de fondo" class="background-image">
  <img src="ruta_de_tu_imagen_superior.png" alt="Imagen superior" class="overlay-image">
</div>

Reemplaza ruta_de_tu_imagen_de_fondo.jpg y ruta_de_tu_imagen_superior.png con las rutas reales de tus imágenes.

Al abrir este archivo HTML en un navegador, verás que la imagen superior se coloca encima de la imagen de fondo, gracias a la posición absoluta definida en el estilo CSS.

Opción 2: usando la propiedad background-image

Otra forma de colocar una imagen encima de otra en HTML es utilizando la propiedad background-image de CSS para establecer la imagen de fondo y un elemento <img> para la imagen superior. Aquí tienes un ejemplo de cómo hacerlo:

Primero, crea un archivo HTML y escribe la estructura básica del documento:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Imágenes superpuestas - Método 2</title>
    <style>
        /* Escribe aquí tu código CSS */
    </style>
</head>
<body>
    <!-- Escribe aquí tu código HTML -->
</body>
</html>

Luego, dentro de la etiqueta <style>, escribe el siguiente código CSS:

/* Contenedor para las imágenes */
.container {
  position: relative;
  display: inline-block;
  background-image: url('ruta_de_tu_imagen_de_fondo.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 300px; /* Establece el ancho y alto según las dimensiones de la imagen de fondo */
  height: 200px;
}

/* Estilo para la imagen superior */
.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
}

Reemplaza ruta_de_tu_imagen_de_fondo.jpg con la ruta real de tu imagen de fondo.

Después, dentro de la etiqueta <body>, agrega el siguiente código HTML:

<div class="container">
  <img src="ruta_de_tu_imagen_superior.png" alt="Imagen superior" class="overlay-image">
</div>

Reemplaza ruta_de_tu_imagen_superior.png con la ruta real de tu imagen superior.

Al abrir este archivo HTML en un navegador, verás que la imagen superior se coloca encima de la imagen de fondo, que se establece como fondo del contenedor gracias a la propiedad background-image de CSS.

Opción 3: utilizando flexbox y la propiedad z-index

Otra forma de colocar una imagen encima de otra en HTML utilizando flexbox y la propiedad z-index de CSS:

Primero, crea un archivo HTML y escribe la estructura básica del documento:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Imágenes superpuestas - Método 3</title>
    <style>
        /* Escribe aquí tu código CSS */
    </style>
</head>
<body>
    <!-- Escribe aquí tu código HTML -->
</body>
</html>

Luego, dentro de la etiqueta <style>, escribe el siguiente código CSS:

/* Contenedor para las imágenes */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 300px; /* Establece el ancho y alto según las dimensiones de la imagen de fondo */
  height: 200px;
}

/* Estilo para la imagen de fondo */
.background-image {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: auto;
}

/* Estilo para la imagen superior */
.overlay-image {
  position: absolute;
  z-index: 2;
}

Después, dentro de la etiqueta <body>, agrega el siguiente código HTML:

<div class="container">
  <img src="ruta_de_tu_imagen_de_fondo.jpg" alt="Imagen de fondo" class="background-image">
  <img src="ruta_de_tu_imagen_superior.png" alt="Imagen superior" class="overlay-image">
</div>

Reemplaza ruta_de_tu_imagen_de_fondo.jpg y ruta_de_tu_imagen_superior.png con las rutas reales de tus imágenes.

Al abrir este archivo HTML en un navegador, verás que la imagen superior se coloca encima de la imagen de fondo, gracias al uso de flexbox y la propiedad z-index en el estilo CSS. La imagen con el z-index más alto se mostrará por encima de las otras imágenes.

Si te ha gustado este pequeño tutorial, puede que también te interese este artículo en el que te enseño a hacer un menu horizontal en html.