Background-image в размер окна браузера

Задача: центрировать background-image в размер окна браузера.

<section class="banner_main">
</section>

Создадим пустую секцию. Дадим ей уникальный класс.

section.banner_main {
  background-color: #f4f4f4;
  background-image: url("https://erweb.ru/wp-content/uploads/2017/01/Target-PNG-HD.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 100vh;
}

Стандартно задаем background-image нашей section,

background-size: contain (масштабируем изображение, чтобы оно полностью помещалось внутрь section),

а также height: 100vh (поддержка браузерами данного свойства — caniuse).

Наше фоновое изображение постоянно центрировано при разном разрешении экрана, в полную высоту и ширину окна браузера.

Теперь добавим поверх текст и также центрируем его.

Для <h1> я добавил еще медиа-запросы.

Итого: background-image центрирован, как и текст поверх изображения.