Как установить фоновое изображение 50% на контейнер-жидкость?

Question

Обратите внимание, я действительно не пытаюсь создать тему 'code for me plz', я на самом деле пытался решить эту проблему самостоятельно, но не могу. Я нашел похожие темы, но они не решили мою конкретную проблему.

Итак, у меня есть следующий дизайн сайта в Illustrator:

Мне нужно создать контейнер-флюид, в котором должно быть 50% изображения и 50% цвета. Я пробовал так много разных методов, но просто не мог заставить его работать, особенно отзывчивость.

Есть ли кто-нибудь, кто может помочь мне решить эту проблему? Действительно любопытно, как это делается в Bootstrap.

Кстати, для повышения эффективности загрузки я работаю с Bootstrap.grid.css, у меня нет полного доступа ко всем классам Bootstrap.

Answer 1

Внимательно прочитайте документацию Bootstrap для Схема сетки

Вы можете делать то, что вам нужно, с помощью простых строк и столбцов; насколько быстро реагирует контент внутри этих приложений, зависит от того, что вы создаете

.img-bg {
  background: url("https://via.placeholder.com/1600")
}

.color-bg {
  background: green;
  text-align: right;
}

.row>div {
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6 img-bg">
      <span>This background is an image</span>
    </div>
    <div class="col-6 color-bg">
      <h2>Lorem Ipsum</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugiat architecto blanditiis eaque laborum, vel voluptatum voluptas asperiores odio quia error commodi ratione dolorem, cupiditate dolor eius nulla atque quidem?
      </p>
    </div>
  </div>
</div>