Найти
×

Как в HTML сделать фон картинкой: разные способы и примеры кода

0
0

Добавление фоновых изображений позволяет сделать дизайн сайта более привлекательным и запоминающимся для посетителей. В этой статье мы разберем 3 основных способа установки фона картинкой на веб-страницу с примерами HTML и CSS кода.

Использование тега body

Самый простой способ - установить фоновое изображение для тега body, который является контейнером всего видимого контента страницы:

<body style="background-image: url(img/bg.jpg);"> ... </body>

Здесь мы применили инлайн-стиль, задав атрибут style со свойством background-image, указав путь к файлу фонового изображения в круглых скобках. После этого фоновая картинка отобразится позади всего контента страницы.

Также можно настроить дополнительные параметры фона:

  • Размер фона - background-size
  • Положение by - background-position
  • Повторение - background-repeat
  • Прилипание при прокрутке - background-attachment

Например:

background-image: url(img/bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;

Тег div для фонового изображения

Еще один способ - создать отдельный блок div, для которого задать фоновую картинку:

<div id="bgImage"></div> #bgImage { width: 100%; height: 400px; background-image: url(img/bg.jpg); }

Здесь мы добавили пустой блок div с идентификатором #bgImage и задали ему высоту 400px, чтобы текст сайта не наезжал на него. В CSS применили фоновую картинку именно для этого блока.

Задавайте ширину блока для фонового изображения в 100%, тогда он автоматически растянется на всю ширину страницы.

Такой способ позволяет отделить фоновую картинку от остального контента для большего удобства.

Фон через CSS для тега html

Фоновое изображение для всего документа можно установить во внешнем CSS-файле, применив стили к тегу html:

html { background: url(img/bg.jpg) no-repeat center fixed; background-size: cover; }

Здесь мы компактно задали необходимые свойства: путь к файлу, отменили повторение фона, выровняли по центру, зафиксировали при прокрутке и растянули на весь экран.

Такой способ удобен тем, что не требует задания стилей каждому блоку страницы - достаточно применить фон один раз к корневому элементу html.

Женщина смотрит на монитор с видео на заднем фоне веб-страницы

Фиксация фонового изображения при прокрутке

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

Для этого используется свойство background-attachment:

background-image: url(img/bg.jpg); background-attachment: fixed;

Теперь при прокрутке страницы фоновое изображение будет неподвижно, а контент будет прокручиваться поверх него.

Адаптивный фон под разные разрешения

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

@media (max-width: 600px) { html { background-image: url(img/bg-mobile.jpg); } }

Здесь мы применили медиа-запрос - для экранов шириной до 600px будет подгружаться другое фоновое изображение bg-mobile.jpg, более подходящее по размерам.

Оптимизация фоновых изображений

Чтобы ускорить загрузку страницы, нужно оптимизировать фоновую картинку:

  • Перевести изображение в формат webp
  • Сжать с потерями без визуальной разницы
  • Уменьшить размер и разрешение

Оптимальный вариант для фона - размер 1000x600 px и вес 100-200 Кб.

Параллакс-эффект для фонового изображения

Для создания эффекта параллакса фон должен быть зафиксирован, а контент прокручиваться поверх него разной скоростью, создавая иллюзию глубины.

Этого можно добиться при помощи JavaScript.

Наложение цветовой подложки на фоновое изображение

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

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }

Это создаст интересный эффект смешивания цветов фона и подложки.

Современный небоскреб ночью, в окне виден телевизор с анимированным фоном

Фоновое видео вместо изображения

В качестве фона на сайте также можно использовать видео в формате mp4 или WebM. Это выглядит еще более эффектно.

Чтобы вставить видео-фон, используется тот же тег video и атрибут autoplay:

<video autoplay loop muted> <source src="video.mp4" type="video/mp4"> </video>

Такой фон будет проигрывать видеоролик на весь экран в цикле, не отвлекая звуком.

Фоновое изображение для блока контента

Фоновую картинку можно применить не ко всей странице, а только к нужному блоку контента:

.content { background-image: url(img/bg.jpg); padding: 20px; }

Это позволит выделить, например, блок с основным текстом на общем однотонном фоне сайта.

Динамическая смена фоновых изображений

С помощью JavaScript можно реализовать динамическую смену фоновых картинок через определенный промежуток времени, например, чтобы создать слайдшоу.

Для этого мы будем менять URL в свойстве background-image и перезагружать страницу.

Оформление текста на фоновом изображении

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

.text { background: rgba(255,255,255,0.8); padding: 20px; }

Такой блок будет хорошо контрастировать на любом изображении, повышая читаемость.

Выравнивание текста относительно фона

Часто бывает нужно разместить текст поверх фонового изображения в определенном месте - слева, по центру или справа:

.text { position: absolute; top: 20px; left: 20px; }

Используя позиционирование, можно точно указать расположение текстового блока на фоне.

Изменение цвета шрифта

Для контраста с фоном цвет шрифта текста также можно выбрать подходящий. Например, белый цвет хорошо подойдет для темного фона:

.text { color: #fff; }

Фиксация шапки сайта над фоновым изображением

Если на сайте используется фоновая картинка со скроллом, важно зафиксировать шапку с навигацией, чтобы она не уплывала вместе с фоном вверх.

Для этого шапке задается позиционирование:

.header { position: fixed; top: 0; left: 0; width: 100%; }

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

Вставка нескольких фоновых изображений

На страницу можно добавить сразу несколько фоновых изображений, расположив их в стопку:

background-image: url(img/bg1.jpg), url(img/bg2.png), url(img/bg3.webp);

При этом верхнее изображение будет поверх нижнего. Так можно создать многослойный коллаж из картинок.

Разное расположение фонов по странице

Каждому фоновому слою можно задать свое расположение:

background-image: url(img/bg1.jpg), url(img/bg2.png); background-position: top left, bottom right;

В результате получится интересный эффект с изображениями в разных частях страницы.

Анимация фона при прокрутке

Сделаем анимацию, которая будет сдвигать фоновое изображение вниз при скролле страницы. Для этого используем JavaScript.

При прокрутке будем изменять координату Y в свойстве background-position:

let bgY = 0; window.addEventListener('scroll', () => { bgY = window.scrollY / 2; document.body.style.backgroundPosition = `center ${bgY}px`; });

В результате фоновое изображение будет плавно сдвигаться вниз вслед за контентом.

Другие варианты анимации

Также можно реализовать параллакс-эффект, размытие, изменение масштаба для фона при прокрутке. Возможности для креатива много!


Похожие статьи