Cómo superponer imagen sobre fondo de color estrecho?

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?

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.

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?

Hacer clic para expandir...

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


Logicamente despues ajustas margenes, etc. a gusto eh!

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

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: