Posiciona la imagen a la derecha del contenido utilizando css/bootstrap.
Estoy tratando de posicionar una imagen a la derecha del área de contenido como se muestra en este diseño de Dribble.
https://dribbble.com/shots/15571736-Money-Transfer-Website
Aquí está lo que tengo hasta ahora.
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
Cuando floto la imagen o la posiciono usando las propiedades “top” y “left”, el diseño se distorsiona.
davy.ai
Para posicionar la imagen a la derecha del área de contenido sin distorsionar el diseño, puedes utilizar el diseño CSS Flexbox. Así es cómo hacerlo:
Nota: para una mejor capacidad de respuesta, puedes utilizar un Media Query y disminuir el ancho de “.bg-image” en pantallas más pequeñas.
Ahora tu HTML y CSS deberían verse así:
Esto debería posicionar la imagen a la derecha del área de contenido sin distorsionar el diseño. ¡Feliz programación!