Как растянуть фон на весь экран CSS

Самый простой способ растянуть фон на весь экран — это установить свойство height: 100vh для элемента с фоном. Это свойство устанавливает высоту элемента на 100% высоты видимой области окна браузера, что приводит к растяжению фона на весь экран.

body {
  background-image: url(path/to/image.jpg);
  background-size: cover;
  background-position: center center;
  height: 100vh;
}

В этом примере свойство background-size устанавливает размер фона cover (соотношение сторон изображения сохраняется, так что изображение растягивается на всю высоту и ширину элемента, а лишнее обрезается), а свойство background-position устанавливает позиционирование фона по центру окна браузера.

Также можно использовать width: 100vw или width: 100% для растяжения фона в ширину.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как растянуть фон на весь экран CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали