Как разместить два div и изображение рядом

Question

У меня есть два div (с разным цветом фона) и изображение. Я хочу, чтобы два div были фоном раздела и поместили изображение поверх этих двух div, но с левой стороны. Я хочу, чтобы изображение занимало 50% размера на любом устройстве. Так что цвет изображения и фона обоих блоков идеально совпадает.

Вот код, с которым я имею дело.

.upper {
  background-color: #fff8f0;
  width: 100%;
  height: 288px;
  position: relative;
}

.lower {
  background-color: #ffe9cd;
  width: 100%;
  height: 412px;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Bs">
  <div class="row">
    <div class="col-lg-6">
      <div class="upper">
      </div>
      <div class="lower">
      </div>

    </div>
    <div class="col-lg-6">
      <img src="picture/biblestudy.jpg" alt="Bible study people">

    </div>

  </div>

</section>

Это цвет изображения и фона

СПАСИБО !!!

Answer 1

.upper {
  background-color: #fff8f0;
  height: 80vh;
}

.lower {
  background-color: #ffe9cd;
  height: 20vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Bs">
  <div class="row">
    <div class="col-6">
     <div class="row">
      <div class="col-12 upper">
      </div>
      <div class="col-12 lower">
      </div>
    </div>
    </div>
    <div class="col-6">
	<div class="row">
      <div class="col-12 upper">
      </div>
      <div class="col-12 lower">
      <img src="picture/biblestudy.jpg" alt="Bible study people">
      </div>
	  </div>
    </div>
  </div>
</section>

Answer 2

Код, который вы предоставили для показа изображения, находится на top right.

Приведенный ниже код содержит изображение с width 50% всегда с разным разрешением и top left

.Bs {
  background-color: red;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<section class="Bs">
  <div class="row">
    <div class="col-12">
      <div class="upper">
        <img src="https://images.unsplash.com/photo-1590541576391-dfc42314a7ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" width="50%" alt="">
      </div>

    </div>
    <div class="col-6">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus illum repudiandae laborum magni
      exercitationem fuga, quas reprehenderit repellat. Eius tenetur dolores quos quisquam cumque ipsum
      atque debitis laudantium minima dolore.

    </div>
    <div class="col-6">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus illum repudiandae laborum magni
      exercitationem fuga, quas reprehenderit repellat. Eius tenetur dolores quos quisquam cumque ipsum
      atque debitis laudantium minima dolore.
    </div>
  </div>

</section>

Answer 3

Проверьте реализацию на JS Fiddle

Надеюсь, это поможет.

.bg {
  position: relative;
  height: 360px;
}
  
.bg-upper {
  background-color: #fff8f0;
  width: 100%;
  height: 70%;
}

.bg-lower {
  background-color: #ffe9cd;
  width: 100%;
  height: 30%;
}

.bg-image-container {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-image {
  max-width: 100%;
  max-height: 100%;
}