Cómo poner texto encima de una imagen html css

11 May

Una forma sencilla para insertar texto encima de una imagen, para cualquier proyecto de trabajo web, este es un ejemplo muy simple.

Para confeccionar la estructura HTML usaremos los siguientes elementos:

  • header: elemento de ayuda de navegación, donde se coloca el encabezado.
  • div: un contenedor de class «caja».
  • img: una imagen.
  • div: un texto de class «texto1».
  • div: un texto de class «texto2»

Siguiendo el anterior html y sin ningún css el resultado sería así.

Una imagen y los dos textos.

Ahora confeccionamos la estructura CSS para poder lograr poner el texto sobre la imagen. 

  • contenedor «caja»: le aplicamos una posición relativa, esto es, el punto de referencia es la esquina superior izquierda de su elemento. inline-block los elementos con este estilo se ponen horizontalmente y  respeta el ancho y altura (width, height) esté es el estilo por defecto de las imágenes.
  • texto1: le aplicamos una posición absoluta, el punto de referencia para medir el desplazamiento está en la ventana del navegador. Así con los márgenes superior e izquierda posicionamos el texto1. top 10px y left 10% los valores pueden ser de medida o de porcentaje, una clase de letra, color y tamaño.
  • texto2: le aplicamos también una posición absoluta, altura y margen, en este caso todo en porcentajes, un color y tamaño de la fuente. 

El resultado es texto1 «Playa de las Catedrales» en la parte superior izquierda y el texto2 «Lugo-Galicia» en la parte inferior derecha de la imagen.

Diseño de tabla html/css

2 respuestas hasta “Cómo poner texto encima de una imagen html css”

  1. gabriel araya garcia 27 de junio de 2021 a 01:21 #

    No me resulta, pues para aplicarlo a varias fotos (haciendo use de flex grid), y al hacer responsiva la pagina, queda un caos.

    Me gusta

    • Pancloro 30 de junio de 2021 a 18:38 #

      Bueno, esto es una manera hay otras, tienes que jugar con los márgenes

      Me gusta

Dejar un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

El Cronicón

Diario de una trotamundos

En voz alta

Cuento cuentos, escribo y pienso, aunque no siempre lo hago en este orden.

Educación Jaén

Un lugar en el que dar visibilidad a todo lo bueno que se hace en nuestros centros educativos. Compartir para aprender y mejorar.

Mi cajón de sastre en Wordpress

Decidido: Moriré viviendo, esa es mi promesa y mi deseo... ahora veremos si me dejan ... si nos dejan

Grupo 2

Somos el grupo 2 de la asignatura Integración de las TIC en la docencia de la especialidad Científico-Tecnológica. Este grupo esta formado por: Jara Díaz de Rada Clavero, Isabel Gallardo Busto e Itsaso Ureta Royo.

Verónica Mas

Escribir es un modo de vida.

Mi mamá tiene cáncer

Qué pasa con la vida de la familia de un persona con cáncer

TEJIENDO LAS PALABRAS

CON LOS HILOS INVISIBLES DEL ALMA

EL ECO DE TUS PALABRAS

"Todo cuanto me llegue yo tambien lo haré llegar"

Mariposas de Cris

Autora de "Dime con quién hablas y te diré si estás loca", "No me busquéis" y "¡Qué suerte la mía!"

LA INFORMÁTICA Y YO

Aprender el mundo de la informática

Remigio Sol

¡Viva la Música!

A %d blogueros les gusta esto: