Background Image в CSS и HTML: как сделать фон для сайта

Фоновое изображение на сайте — это не просто украшение. Оно помогает визуально выделить блок, задать нужное настроение и сделать интерфейс более выразительным. В фоне можно использовать не только фото, но и текстуры, градиенты, абстрактные паттерны — всё зависит от задач.

В этой статье разберём, как работать с background-image в CSS, как его правильно прописывать, настраивать и оптимизировать.

Что такое background-image в CSS

Свойство background-image в CSS отвечает за установку фонового изображения для элемента. Это может быть что угодно: фото, иллюстрация, текстура, даже SVG или градиент. Здесь важно правильно указать путь к файлу и настроить поведение фона.

Для чего используется свойство background-image

background-image применяют, когда нужно добавить изображение в фон блока — например, для оформления карточки товара, баннера, секции на лендинге или всего сайта. Чаще всего фон не взаимодействует с пользователем напрямую, он служит именно для визуального оформления.

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

Разница между <img> и CSS-фоном

Главное вот в чём: <img> — это контент. Он часть структуры документа, его озвучивают скринридеры, он может быть частью статьи или карточки товара.

background-image — это оформление. Такой фон не индексируется, не участвует в доступности и не несёт смысловой нагрузки. Его нельзя скопировать как картинку по правому клику, а при ошибке загрузки ничего не покажется.

Если картинка — важная часть смысловая часть сайта, то используем <img>. Если просто хотим украсить блок или задать стиль — background-image подойдёт лучше.

Как добавить фоновое изображение в HTML/CSS

Чтобы задать фоновое изображение, нужно использовать свойство background-image в CSS. Оно работает с любыми HTML-элементами — хоть body, div или section.

Синтаксис background-image (url, путь к файлу)

Базовая запись простая — указываем адрес картинки в скобках и всё:

background-image: url('bg.jpg');

Внутри url() указываем путь до файла. Это может быть:

Как прописать фон через CSS 

Есть несколько вариантов. Всё зависит от того, где и как мы работаем с кодом.

Первый способ: прописать во внешнем CSS-файле:

.hero {
  background-image: url('images/hero.jpg');
}

Используют в нормальной фронтенд-верстке: во фреймворках, обычном HTML+CSS, когда стили выносятся в отдельные файлы.

Также можно прописать инлайн-стиль, то есть прямо в разметке:

<div style="background-image: url('images/block.jpg');">
  Контент
</div>

Инлайн-стили используют либо для быстрых тестов, либо когда фон задаётся динамически — например, в элементах, которые генерируются из данных. Или когда фон зависит от состояния, и тогда проще прописать его прямо в JSX.

Пример кода: фон для всего сайта и отдельных блоков

Единый фон на весь сайт часто используется на лендингах или в промостраницах. Например, на фоне — какое-то тематическое фото, а поверх — заголовок, кнопка и call-to-action.

Часто делают отдельное фоновое изображение для hero-секции — первого крупного блока на сайте:

.hero-section {
  background-image: url('/images/bg-full.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Внутри страницы могут быть блоки с разными фонами — например, текстурами, паттернами или мягкими градиентами. Главное — не переборщить. Это уместно, если фон не отвлекает от контента, а просто добавляет глубины или структуры.

.section-features {
  background-image: url('/images/patterns/grid.png');
  background-repeat: repeat;
}

А вот в карточках (.card, .product-card, .plan-box) почти всегда хватает background-color. Там уже и так есть заголовок, описание, кнопка — если сверху ещё воткнуть background-image, всё визуально расплывется.

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

Настройка фонового изображения

Окей, фон мы задали. Но дальше начинается самое интересное — как его повернуть, растянуть, зафиксировать, чтобы он вёл себя нормально на разных экранах и не превращался в обои из Windows XP. Разберём основные свойства, которые отвечают за поведение фоновой картинки.

background-repeat (no-repeat, repeat-x, repeat-y)

Для примера возьмем изображение забора 628 × 706 и посмотрим, как оно меняется в зависимости от разных параметров.

По умолчанию фон повторяется, как плитка:

background-repeat: repeat;

Если не задать явно — изображение будет дублироваться по горизонтали и вертикали пока не заполнит всё пространство.

Можно задать такие параметры:

 /* Не повторять вообще */
background-repeat: no-repeat;

 /* Только по горизонтали */
background-repeat: repeat-x; 

/* Только по вертикали */
background-repeat: repeat-y;

Если делаете фон на карточке или баннере, то почти всегда нужен no-repeat. А вот текстуры или бесшовные паттерны (шум, узоры), наоборот, могут красиво ложиться с repeat.

background-size (cover, contain, ручные значения)

Это свойство определяет, какого размера будет фон. Самый частый случай — заполнить весь экран или вписаться в блок, не искажая изображение. Тогда мы прописываем cover — это позволяет заполнить весь блок фоновым изображением и обрезать лишнее:

background-size: cover;

Другие параметры могут быть такие:

/* Вписывает картинку целиком */
background-size: contain;

👉 Но здесь есть нюанс: если соотношение сторон картинки не совпадает с размерами блока, изображение либо оставит пустые полосы (если стоит no-repeat), либо начнёт повторяться, если задан background-repeat: repeat. Поэтому лучше явно указать нужное поведение — например, добавить no-repeat и background-position: center, если нужна одна картинка по центру.

/* Растянуть по ширине и высоте (может исказиться) */
background-size: 100% 100%;

Параметр cover полезен для hero-секций и фоновых фото на весь экран. Если хотим показать картинку полностью (например, логотип), то используем contain. А 100% 100% используем, если контролируем размеры и искажение не страшно.

background-position (центрирование, top, left, right)

Задаёт, откуда начинается фон. Особенно важно, если мы не хотим, например, чтобы у человека на фото обрезалась голова:

/* По центру */
background-position: center; 

/* В левом верхнем углу */
background-position: top left;

/* По процентам от блока */
background-position: 50% 100%; 

Если используется background-size: cover, то центрирование фона делают почти всегда. Иногда нужно прижать картинку к верху, если это, например, графика, уходящая в шапку.

Дополнительные свойства фона

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

Фиксированный фон (background-attachment: fixed)

Это свойство задаёт, двигается ли фон вместе с содержимым страницы или остаётся на месте. Значение fixed создаёт тот самый эффект параллакса: контент скроллится, а фон стоит.

background-attachment: fixed;

Картинка остаётся на месте при прокрутке, а контент «едет» по фону. Но это работает только если у блока задана высота. Такой подход используют в hero-секциях с большим фото или на лендингах, где нужен эффект глубины. А вот на мобильных устройствах background-attachment: fixed может не работать (особенно iOS Safari).

Градиент вместо изображения (linear-gradient)

Вместо картинки можно использовать градиент — это всё та же background-image, только с другим типом значения:

linear-gradient(направление, цвет1, цвет2, ...)

Можно сделать красиво, быстро и экономно (весит 0 байт) и задать мягкие переходы между секциями. Градиент отлично ложится как подложка под текст:

background-image: linear-gradient(180deg, #FFD1E6 9.66%, #CAF2F0 100%);

Можно даже комбинировать градиент и изображение:

background-image: linear-gradient(rgba(68, 68, 68, 0.5), rgba(0, 0, 0, 0.5)), url('bg.png');

Полезно, если нужно затемнить фон или сделать текст поверх более читаемым. При этом градиент всегда будет поверх картинки, потому что в CSS-слоях порядок значений идёт сверху вниз: первый фон — ближе к глазам, второй — под ним.

Если градиент непрозрачный, он перекроет всё, что ниже. Поэтому важно использовать rgba с прозрачностью, иначе фон не будет виден вообще. Такая техника часто применяется на баннерах и hero-секциях, где нужно оставить картинку, но немного приглушить её.

Наложение цвета поверх фона (background-color + прозрачность)

Иногда нужно затемнить фон или задать цветовую маску. Это можно сделать через градиент и прозрачность, как в примере выше, либо через отдельный полупрозрачный слой:

Например, мы создаем элемент-обёртку с псевдослоем поверх:

<div class="wrapper">
  <div class="overlay"></div>
  <div class="content">Контент</div>
</div>

И дальше стилизуем обертку и наложение:

.wrapper {
  background-image: url('bg.jpg');
 /* Нужен для абсолютного позиционирования .overlay */
  position: relative;
}
.overlay {
  background-color: rgba(0,0,0,0.4);
  position: absolute;
  /* то же самое, что top: 0; right: 0; bottom: 0; left: 0 */
  inset: 0;
}

Такой подход используют, когда текст сливается с фоном, когда нужно сохранить картинку, но сделать её менее яркой, или когда нужно использовать фон в фирменных цветах (например, с фильтром бренда).

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

Фон может быть красивым, но если он весит 4 мегабайта, сайт будет грузиться как интернет-магазин из 2000 года. Поэтому важно не просто вставить картинку, а сделать это с умом: выбрать правильный формат, сжать без потерь и учесть адаптацию под мобильные устройства.

Какой формат лучше (JPG, PNG, WebP)

Выбор формата изображения зависит от задачи. Если добавляете фоновую фотографию типа пейзажа, интерьера или лица — подойдёт JPG, а ещё лучше WebP. Первый — классика: нормальный баланс между качеством и весом, но без поддержки прозрачности. Второй — современный формат, который при том же качестве весит меньше. Браузеры уже давно его поддерживают, так что можно смело переходить.

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

Для всего остального стоит ориентироваться на WebP как на основной формат: он универсален, лёгкий и отлично подходит для фонов, особенно если хотите ускорить загрузку сайта.

Чтобы погрузиться в тему, посмотрите наши статьи про WebP и сравнение векторной и растровой графики — там мы подробно рассказали, что и когда использовать.

Сжатие фона без потери качества

Подходящий формат изображения ещё не означает, что фон оптимален. Часто картинки можно сжать в два-три раза без заметной потери качества — просто через нормальный оптимизатор. Это быстро, не требует установленного «Фотошопа» и реально влияет на скорость загрузки.

Squoosh — бесплатный инструмент от Google, позволяет прямо в браузере посмотреть, как будет выглядеть изображение после сжатия. Для PNG и JPG отлично подойдёт TinyPNG — закидываем туда файл и получаем версию полегче.

А если работаете на маке и хотите всё делать локально, то поставьте ImageOptim, это практически стандарт среди верстальщиков.

Зачем всё это? Во-первых, сайт будет грузиться быстрее. Во-вторых, пользователи на мобильных не будут сжигать трафик впустую. А Google Lighthouse и другие инструменты замера производительности скажут спасибо.

Адаптивный фон под мобильные устройства

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

Самый простой способ — медиазапросы. Можно задать отдельное изображение для мобильной версии:

@media (max-width: 768px) {
  .hero {
    background-image: url('mobile-bg.webp');
  }
}

Работает нативно, без JS, и в большинстве случаев этого достаточно. 

Но и здесь есть нюанс: браузер может заранее подгрузить картинки из разных @media, особенно если они лежат в одном CSS-файле. Это делается, чтобы переключение между режимами (при повороте экрана или ресайзе окна) происходило мгновенно. 

Поэтому если важно жёстко контролировать загрузку ресурсов (например, не тянуть тяжёлый фон на мобилке) — лучше подключать фон через JavaScript:

const block = document.querySelector('.block');
if (window.innerWidth <= 768) {
  block.style.backgroundImage = "url('mobile.jpg')";
} else {
  block.style.backgroundImage = "url('desktop.jpg')";
}

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

Если фон важен — под него можно обрисовать цвет-плейсхолдер (background-color), который покажется сразу, пока не загрузится картинка. 

Бонус для читателей

Если вам интересно погрузиться в мир ИТ и при этом немного сэкономить, держите наш промокод на курсы Практикума. Он даст вам скидку при оплате, поможет с льготной ипотекой и даст безлимит на маркетплейсах. Ладно, окей, это просто скидка, без остального, но хорошая. 

Вам слово

Приходите к нам в соцсети поделиться своим мнением о статье и почитать, что пишут другие. А ещё там выходит дополнительный контент, которого нет на сайте — шпаргалки, опросы и разная дурка. В общем, вот тележка, вот ВК — велком!