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.

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. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

>> Eliart <<

Ilustradora y diseñadora gráfica.

Verónica Mas

Escribir es un modo de vida.

Todas las notas

Oda a la vida, a la muerte, al amor, a la melancolía

Martín Gómez

Poemas, Canciones y Otros

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" y "No me busquéis"

LA INFORMÁTICA Y YO

Aprender el mundo de la informática

Remigio Sol

¡Viva la Música!

El blog de una empleada doméstica

Aventuras de una chacha

la recacha

Una recacha es un sitio donde uno se siente a gusto, protegido. Un entorno adecuado para reflexionar sobre la vida...

VIAJES AL FONDO DEL ALSA

“Quizás viajar no sea suficiente para prevenir la intolerancia, pero si logra demostrarnos que todas las personas lloran, ríen, comen, se preocupan y mueren, puede entonces introducir la idea de que si tratamos de entendernos los unos a los otros, quizás hasta nos hagamos amigos” – Maya Angelou

A %d blogueros les gusta esto: