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
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:
- Podemos cambiar el tamaño de la imagen
- Podemos agregar borde a la imagen
- Podemos alinear la imagen con respecto a la página o contenedor padre.
Si tienes algun problema, déjanos un comentario.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
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