Cómo poner texto encima de una imagen con HTML/CSS

En este tutorial de HTML & CSS te vamos a enseñar cómo poner texto encima de una imagen. Esto es algo muy útil para cualquier proyecto web y lo mejor es que es muy sencillo de lograr. Sigue leyendo para aprender cómo posicionar un texto encima de una imagen.

Cómo poner texto encima de una imagen con HTML/CSS

HTML: Establecer la estructura

Para este tutorial, vamos a utilizar los siguientes elementos:

  • Un DIV contenedor con clase ‘contenedor’
  • Una imagen
  • Un DIV de texto con clase ‘texto-encima’

Es decir, vamos a crear un DIV y dentro de él vamos a tener los elementos de imagen y un DIV de texto. El código sería el siguiente:

<div class="contenedor">
  <img src="URL DE IMAGEN" />
  <div class="texto-encima">Texto</div>
  <div class="centrado">Centrado</div>
</div>

Por el momento, solo tendríamos una imagen y abajo un texto. Hasta ahora no se vería el texto sobre la imagen.

Nota: He agregado otro DIV de texto con clase ‘centrado’. Este texto estará posicionado al medio de la imagen.

CSS: Indicar la posición del texto

Para colocar el texto sobre la imagen necesitamos usar CSS. Usaremos el siguiente código para lograr esa sobreposición.

.contenedor{
    position: relative;
    display: inline-block;
    text-align: center;
}

.texto-encima{
    position: absolute;
    top: 10px;
    left: 10px;
}
.centrado{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

El resultado final será el siguiente:

Texto
Texto Centrado

Comentarios

  • Podemos cambiar la posición del DIV de texto, variando la variable de top y left en CSS.
  • Podemos posicionar el DIV de texto con la variable de bottom y right en CSS.

Si tienes algun problema, déjanos un comentario.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

6 Comentarios

  1. Alejandro dice:

    Buenas, es un excelente post!! Justamente necesitaba diseñar unos flyers en mi home page y era el artículo que buscaba. Además, quiero agregar que sumaría mucho al post agregar lugares en donde te puedas capacitar en HTML, le agregaría más contenido y podría posicionar mejor aún. Les dejo el curso que me parece ideal para este post https://utnba.centrodeelearning.com/detalle/curso/2118/desarrollo-web-en-html-5-y-css-3

  2. Antonella dice:

    Hola, queria saber como haria para que dps estas imagenes poderlas poner una al lado de la otra, originalmente tengo a mis imagenes por fila con dos columnas, gracias

    • admin dice:

      Hola Antonella! Para poder poner las imágenes una al lado de otra, te recomiendo usar dos veces el div contenedor. El div contenedor tiene en CSS display:inline-block, lo cual permite que coloques un div al lado del otro, lo cual hará que las dos imágenes esten al lado. Así:

      <div class="contenedor">
        <img src="URL DE IMAGEN" />
        <div class="texto-encima">Texto</div>
        <div class="centrado">Centrado</div>
      </div><div class="contenedor">
        <img src="URL DE IMAGEN" />
        <div class="texto-encima">Texto</div>
        <div class="centrado">Centrado</div>
      </div>

  3. Laura dice:

    Buenas tardes, quería saber como haría para después de poner una imagen y texto encima, ponerla con una capa transparente, gracias.

  4. Nicolle dice:

    Hola, me gustaria como hago para cambiar el tamaño de la imagen, gracias.

  5. ernesto dice:

    Muchas gracias por el aporte, me salvaste ☺☺

Agregue un comentario

Su dirección de correo no se hará público.


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