Cómo superponer imagen sobre fondo de color estrecho?

  • Autor Autor agustin12
  • Fecha de inicio Fecha de inicio

agustin12

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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?
 

Adjuntos

  • 1658177609098.webp
    46,9 KB · Visitas: 14
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.
 
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: