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.
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:
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.
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
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
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í:
Buenas tardes, quería saber como haría para después de poner una imagen y texto encima, ponerla con una capa transparente, gracias.
Hola, me gustaria como hago para cambiar el tamaño de la imagen, gracias.
Muchas gracias por el aporte, me salvaste ☺☺
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?
Hola Scarleth, la primera imagen debería estar fuera del div de clase “contenedor”.
gracias
y como hago para hacerlo responsive design porque queda fatal siendo responsive