Как растянуть фоновое изображение в CSS на всю высоту

Быстрый ответ

Для равномерного заполнения всего доступного пространства экрана фоновмым изображением используйте этот код CSS:

body {
  /* Замените 'your-image.jpg' на путь к вашему изображению */
  background: url('your-image.jpg') no-repeat center center/cover;
}

Значение center center/cover гарантирует сохранение пропорций изображения при его растягивании на весь экран. Свойство no-repeat предотвратит повторение изображения на фоне.

Заложим основу

Базовые правила CSS

Чтобы фоновое изображение корректно отображалось на разных устройствах и в различных браузерах, определим следующие CSS-правила:

html, body {
  /* Убираем отступы и пустое пространство */
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Предотвращаем повторение изображения */
  background: url('your-image.jpg') no-repeat center center fixed;
  
  /* Обеспечиваем совместимость со старыми версиями браузеров */
  -webkit-background-size: cover; /* Для Safari 3-4 */
  -moz-background-size: cover;    /* Для старых версий Firefox */
  -o-background-size: cover;      /* Для старых версий Opera */
  
  /* Стандартное свойство */
  background-size: cover;         
}

Подробнее об этом расскажет наш спикер на видео

Свойство background-size

Ключевое слово cover в значении background-size: cover; масштабирует изображение таким образом, что оно растягивается и полностью покрывает всю область, не нарушая при этом пропорций изображения.

Избегаем повторения

Свойство background-repeat: no-repeat; необходимо, чтобы избежать повторения изображения, что может привести к нежелательным эффектам на фоне.

Фиксация фона

Свойство background-attachment: fixed; обеспечивает статичность положения фонового изображения при прокрутке страницы, сохраняя эффект полноэкранного фона.

Единицы измерения относительно размера экрана

Можно использовать единицы, специально предназначенные для работы с размерами экрана — vh и vw:

body {
  /* Делаем прокрутку изображения вместе со страницей */
  background: url('your-image.jpg') no-repeat center center scroll;
  /* Устанавливаем размер фона в процентах от ширины и высоты экрана */
  background-size: 100vw 100vh;
}

100vw и 100vh указывают изображению растянуться на весь экран по ширине и по высоте соответственно.

Практическое применение и рассмотрение различных сценариев

Соблюдение пропорций

Следите за соотношением сторон вашего фона, чтобы при использовании background-size: cover; избежать обрезки ключевых элементов изображения. Подбирайте изображения, учитывая различные размеры экранов.

Производительность

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

Позиционирование фона

В некоторых случаях наилучше выглядит позиционирование фона по верхнему краю, особенно если важные элементы изображения находятся в его верхней части:

body {
  /* Указываем положение фона — верхний край по центру */
  background-position: center top;
}

Тестирование в разных браузерах

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

Визуализация

Попробуйте визуализировать ваш экран как пустое полотно (🖼️), а фоновое изображение как краску (🎨):

Без CSS:

🖼️ + 🎨 = [Изображение видно в оригинальных размерах, без растягивания]

С CSS:

🖼️ + 🎨 ➡️🔧🖥️ = [Изображение растянуто, полностью покрыло весь экран]

Основной код CSS для растяжения фона:

body, html {
  height: 100%;
  margin: 0;
}

.fullscreen-bg {
  /* Фон устанавливается в центр */
  background: url('your-image.jpg') no-repeat center center; 
  background-size: cover; /* Изображение охватывает весь экран */
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1; /* Фон не мешает другому содержимому */
}

Используя background-size: cover;, вы указываете изображению заполнить весь экран без оставления пустот, словно кистью создается полотно (🖌️✨).

Полезные материалы

1. Идеальное фоновое изображение на всю страницу | CSS-Tricks — Продвинутые варианты настройки фона в CSS.
2. background-size – CSS: Каскадные таблицы стилей | MDN — Детальная документация по свойству background-size в CSS.
3. Как сделать изображение на весь экран — Подробное руководство по созданию фоновых изображений на всю страницу.
4. AspectJ не работает как ожидалось в Eclipse – Stack Overflow — Может быть полезно, если содержит информацию о CSS и масштабировании изображений.
5. Размер фона, пожалуйста! – A List Apart — Обсуждение изображений на весь экран в качестве фона.
6. Блог о веб-дизайне | WDD — О том, как создать масштабируемые фоновые изображения в веб-дизайне.