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

Сложность

HTML 20%
CSS 40%

Описание

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

HTML часть

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

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

CSS часть

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).

Заключение

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

Версия с текстом

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

При стандартных настройках браузера высота строки line-height: 1.25, если поделить на два 1.25em / 2 = 0.625em.

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

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

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