Всегда показывать изображение независимо от размеров браузера на рабочем столе

Question

Для приведенного ниже изображения мне нужно всегда показывать фоновое изображение целиком, независимо от размера окна рабочего стола, и всегда следить за тем, чтобы расположение текста оставалось неизменным, т. Е. Кнопка всегда находится в нижней части раздела и не имеетбольшой синий промежуток под ним.

* Обратите внимание, что мое изображение является лишь примером, белый прямоугольник - это действительно изображение продукта, но я удалил его, потому что я не могу выпустить такие фотографии.

Как лучше всего этого добиться? Этот современный веб-дизайн, обеспечивающий одинаковый внешний вид на разных экранах браузеров настольных компьютеров, действительно беспокоит меня, потому что используемые мной методы означают, что дизайн не одинаков для разных экранов браузеров, т. Е. Белый прямоугольник обрезается внизу или высота текстового содержимогослишком мала для высоты синего сечения, и мы получаем большой синий разрыв под ним.

Мои методы, которые я попробовал:

• Используйте строку начальной загрузки 3.3 (веб-сайт не использует эту версию библиотеки), с 2 столбцами с размерами 3/12 и9/12. Это работает, но иногда я вижу большой синий промежуток под текстовым содержимым (кнопка), когда я действительно хочу, чтобы он равномерно распределялся по вертикали.
• Сделайте, чтобы раздел имел фоновое изображение CSS. Установите изображение на обложку. Это приводит к отсечению нижней части белого прямоугольника в определенных размерах окна рабочего стола.

Любые советы о том, как лучше всего подойти к этому дизайну, используя CSS3, Bootstrap 3.3 или т. Д .?

.blue-section {
  background-color: #1caaf2;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.blue-section h1,
.blue-section h2,
.blue-section h3,
.blue-section h4,
.blue-section h5,
.blue-section p {
  color: #fff;
}

.blue-bk {
  background: url('https://i.stack.imgur.com/Sgm8G.png') !important;
  -webkit-background-size: contain !important;
  -moz-background-size: contain !important;
  -o-background-size: contain !important;
  background-size: 100% !important;
  background-repeat: no-repeat !important;
  width: 100%;
}

.banner-img {
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<section class="section-container blue-section">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">
        <img class="img-responsive banner-img" src="https://i.stack.imgur.com/Sgm8G.png" />
      </div>
      <div class="col-xs-9 mht-db-header-information">
        <h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>

        <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>

        <div class="text-center">
          <a class="button-primary" href="">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="section-container blue-section blue-bk">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">

      </div>
      <div class="col-xs-9 mht-db-header-information">
        <h1 class=""><strong>Lorem ipsum Lorem ipsum Lorem ipsum </strong></h1>

        <h3>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</h3>

        <div class="text-center">
          <a class="button-primary" href="">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>

Все изображения:

Только белый прямоугольник (в производстве будет изображение товара):

Фоновое изображение, которое я использую: