Cómo superponer imagen sobre fondo de color estrecho?

agustin12 · 18 Jul 2022

Hola, que tal todos! Estoy haciendo una web con Elementor y quiero superponer una imagen con un fondo de color más angosto. Es algo como lo de la imagen que dejo abajo. Intenté dandole un ancho más angosto a la columna donde pongo la imagen, pero claro, también se achica el ancho de la imagen.
De que manera podría hacerlo?

Ricky Pinto · 18 Jul 2022

No uso elementor pero supongo que se pueden usar capas superpuestas no? si es asi, primero creas una capa contenedora, luego otra con el color y de ultimo la capa con la imagen, en teoria asi se haria con css directamente.

Andyman45 · 18 Jul 2022

agustin12 dijo:
Hola, que tal todos! Estoy haciendo una web con Elementor y quiero superponer una imagen con un fondo de color más angosto. Es algo como lo de la imagen que dejo abajo. Intenté dandole un ancho más angosto a la columna donde pongo la imagen, pero claro, también se achica el ancho de la imagen.
De que manera podría hacerlo?

Dale a la imagen "posición: Absolute" y la moves como quieras.

Logicamente despues ajustas margenes, etc. a gusto eh!

Xavier Z · 18 Jul 2022

Puedes usar un spacer para el rectángulo rosa.
Ahora ya tienes tu rectángulo y tu imagen, colocale a uno de los dos la posición absolute, ajusta margenes y paddings

RaynierL · 18 Jul 2022

Hola, veo que ya te dieron respuestas muy buenas, sin embargo quisiera compartir mi solución:

Puedes usar una imagen cualquiera y redimensionarla dentro del Div con estas reglas de CSS, usa algun background muy liviano y con un filter podrias adicionalmente cambiar su color siempre que lo quieras. Otro plus es que es muy responsivo y facil de utilizar.

Diseño muy similar al que tienes en movil:

Cómo superponer imagen sobre fondo de color estrecho?

agustin12

Adjuntos

Ricky Pinto

Andyman45

Xavier Z

RaynierL

Temas similares