Сложность
Описание
Задача: центрировать 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).
Заключение
Наше фоновое изображение постоянно центрировано при разном разрешении экрана, в полную высоту и ширину окна браузера.
See the Pen background-image centered in the size of the browser window by Alexandr Kazakov (@alexandr-kazakov) on CodePen.
Версия с текстом
Теперь добавим поверх текст и также центрируем его.
See the Pen background-image centered in the size of the browser window width text by Alexandr Kazakov (@alexandr-kazakov) on CodePen.
Для <h1> я добавил еще медиа-запросы.
Итого: background-image центрирован, как и текст поверх изображения.
Say, you got a nice blog article.Really looking forward to read more. Will read on…
new silicone vibrator
[…]here are some links to web-sites that we link to for the reason that we think they may be really worth visiting[…]