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

Recuerda que es posible definir la posición del contenedor de texto:

  • Usando las variables de top y left en CSS.
  • Usando las variables de bottom y right en CSS.

Adicionalmente, podemos seguir haciendo cambios en nuestra imagen. Por ejemplo:

Si tienes algun problema, déjanos un comentario.


También te interesaría...

Suscríbete a nuestra lista de correo

10 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 ☺☺

  6. Scarleth dice:

    Buenas tardes, tengo dos imágenes una arriba y otra abajo, en la de abajo agrego para que salga la información allí pero el párrafo sale en la primera imagen. ¿como hago para que no suceda eso?

  7. renzo gutierrez dice:

    y como hago para hacerlo responsive design porque queda fatal siendo responsive

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


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