Исполняемые доки CSS: Фоновое изображение

Q: Как добавить фоновое изображение в CSS?

Задайте элементу background-image: url("photo.jpg");. Путь считается относительно CSS-файла (или страницы, если это атрибут style или элемент ). Задайте элементу размер, потому что фон никогда не увеличивает пустой элемент.

Q: Как растянуть фоновое изображение на весь элемент?

Используйте background-size: cover; вместе с background-position: center;. Изображение масштабируется, полностью заполняя блок с сохранением пропорций, а лишнее обрезается.

Q: Чем cover отличается от contain?

cover заполняет весь блок и обрезает то, что не помещается. contain показывает изображение целиком и оставляет пустое место с двух сторон, если пропорции не совпадают.

Q: Как убрать повтор фонового изображения?

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

Q: Почему не отображается фоновое изображение?

Обычные причины: неверный путь в url() (он считается от CSS-файла), нулевая высота элемента без содержимого или более позднее сокращенное свойство background, которое сбросило изображение.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

В реальном проекте url() указывает на файл: url("images/hero.jpg"). Путь считается относительно таблицы стилей, в которой он записан (или страницы, если это элемент <style>). Примеры на этой странице используют маленькие SVG-изображения, записанные прямо в код как URL data:, чтобы они работали где угодно.

Две вещи стоит знать сразу:

Фон не дает элементу размер. Пустой div с фоновым изображением имеет высоту 0px. Дайте ему содержимое, padding, height или aspect-ratio.
Фоновое изображение это украшение. Программы чтения с экрана его пропускают, и у него нет альтернативного текста. Изображению со смыслом место в элементе <img>.

background-size: cover, contain и длины

background-size масштабирует изображение. Два ключевых слова сохраняют пропорции:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

Изображение вдвое шире своей высоты, а каждый блок квадратный.

Значение	Результат
`auto` (по умолчанию)	Собственный размер изображения
`cover`	Масштабирует, пока блок не заполнится целиком; лишнее обрезается
`contain`	Масштабирует, пока изображение не поместится целиком; с двух сторон остаются серые полосы
`200px`	Ширина 200px, высота пропорционально
`50% auto`	Половина ширины блока, высота пропорционально
`100% 100%`	Точно размер блока; искажает изображение, если пропорции разные

cover это обычный выбор для баннеров и карточек. contain для логотипов и иллюстраций, которые нельзя обрезать.

background-position и background-repeat

background-position размещает изображение внутри блока с помощью ключевых слов (top, center, bottom, left, right), процентов или длин. background-repeat управляет повтором плиткой. Попробуйте значения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Попробуйте позиции top right, bottom 10px right 20px и 25% 75%, а также значения повтора repeat-x, repeat-y, space (плитки с промежутками, чтобы ни одна не обрезалась) и round (плитки меняют размер, чтобы поместилось целое число).

Слои: несколько фонов и подложка под текст

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio дает пустому блоку высоту, а background-size: cover применяется к обоим слоям. Больше рецептов градиентов на странице градиенты в CSS.

Сокращенное свойство background

background задает все свойства фона одной строкой. Размер должен идти сразу после позиции через косую черту, а цвет ставится в последний слой:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

Запасной цвет виден, пока изображение загружается, и если загрузка не удалась. Любое свойство, не указанное в сокращенной записи, сбрасывается к значению по умолчанию, поэтому ставьте сокращенную запись первой, а отдельные свойства после нее.

Другие свойства фона

Свойство	Что делает
`background-attachment: fixed`	Изображение стоит на месте при прокрутке страницы (игнорируется в Safari на iOS)
`background-origin`	От какого края считается позиция: рамки, padding или содержимого
`background-clip`	Где рисуется фон, включая `text` для заливки букв
`background-blend-mode`	Смешивает слои, например в режиме `multiply`

Частые ошибки

Неверный путь. url() в таблице стилей считается от CSS-файла, а не от HTML-страницы.
Пустой элемент. У него нет высоты, и изображению негде показаться.
Забытый no-repeat с contain или маленьким изображением: оно повторяется плиткой.
Растягивание через 100% 100%, когда имелся в виду cover.
Важные изображения в виде фона. Для содержимого используйте <img> с альтернативным текстом; фоны невидимы для программ чтения с экрана.
Нет кавычек вокруг URL data:, в котором есть пробелы или кавычки. Всегда пишите url("...").

Часто задаваемые вопросы

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

Задайте элементу background-image: url("photo.jpg");. Путь считается относительно CSS-файла (или страницы, если это атрибут style или элемент <style>). Задайте элементу размер, потому что фон никогда не увеличивает пустой элемент.

Как растянуть фоновое изображение на весь элемент?

Используйте background-size: cover; вместе с background-position: center;. Изображение масштабируется, полностью заполняя блок с сохранением пропорций, а лишнее обрезается.

Чем cover отличается от contain?

cover заполняет весь блок и обрезает то, что не помещается. contain показывает изображение целиком и оставляет пустое место с двух сторон, если пропорции не совпадают.

Как убрать повтор фонового изображения?

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

Почему не отображается фоновое изображение?

Обычные причины: неверный путь в url() (он считается от CSS-файла), нулевая высота элемента без содержимого или более позднее сокращенное свойство background, которое сбросило изображение.

Связанные концепции

Фоновое изображение в CSS: размер, позиция, повтор, cover