Свойство CSS background-size

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

На этой странице описаны все принимаемые свойством значения, различие между двумя наиболее полезными ключевыми словами (cover и contain), поведение при нескольких фонах, а также запускаемые примеры для каждого случая. Это одно из свойств CSS3.

Обзор значений

Свойство принимает следующие значения:

auto — значение по умолчанию. Изображение сохраняет свой внутренний размер и пропорции.
<length> — явные ширина и высота, например 300px 200px. Отрицательные значения недопустимы.
<percentage> — размеры относительно области позиционирования фона элемента, например 40% 100%. Отрицательные значения недопустимы.
cover — масштабирует изображение (сохраняя соотношение сторон) до полного покрытия элемента. Выходящая за края часть обрезается.
contain — масштабирует изображение (сохраняя соотношение сторон) так, чтобы оно целиком вписалось в элемент. Возможно появление пустых полос.

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

cover и contain — что выбрать

Эти два ключевых слова используются чаще всего, и их легко перепутать:

cover гарантирует отсутствие пустого пространства — изображение всегда заполняет блок. Недостаток: части изображения могут быть обрезаны, если его соотношение сторон не совпадает с элементом. Используйте для баннеров-героев и полноширинных фоновых секций, где пробелы недопустимы.
contain гарантирует полную видимость изображения — ничего не обрезается. Недостаток: по бокам или сверху/снизу могут появляться пустые полосы. Используйте для логотипов, иконок или любого изображения, которое нужно показать целиком.

Оба ключевых слова сохраняют исходное соотношение сторон, поэтому изображение никогда не искажается. Чтобы растянуть изображение до точных размеров (что может привести к искажению), используйте явные значения <length> или <percentage>.

Изображения с внутренними размерами и без них

Некоторые изображения, например JPEG и PNG, имеют внутренние размеры и пропорции. Другие, например CSS-градиенты, их не имеют. Изображение без внутреннего размера занимает всю область фона элемента, если не указано иное, поэтому background-size немного иначе работает с градиентами, чем с растровыми изображениями.

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

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

background-image: url("logo.png"), url("texture.png");
background-size: 100px 100px, cover;

Начальное значение	auto
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируемость	Да. Размер фонового изображения поддаётся анимации.
Версия	CSS3
Синтаксис DOM	object.style.backgroundSize = "50% 100%";

Синтаксис

Синтаксис свойства CSS background-size

background-size: auto | length | percentage | cover | contain | initial | inherit;

Свойство background-size часто используется вместе с сокращённым свойством background, например:

background: url("image.jpg") no-repeat center / cover;

Пример свойства `background-size`:

Пример свойства CSS background-size со значением px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 300px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Попробуйте сами »

Результат

В приведённом выше примере применяется числовое значение длины. Оно задаёт ширину и высоту фонового изображения. Первое значение задаёт ширину, второе — высоту. Если указано одно значение, второе устанавливается в auto.

Рассмотрим ещё один пример, где ширина и высота background-image задаются в процентах.

Пример свойства `background-size` со значением "%":

Пример свойства CSS background-size со значением % (процент)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 40% 100%;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Попробуйте сами »

Значение cover делает изображение как можно большим без его растягивания.

Пример свойства `background-size` со значением "cover":

Пример свойства CSS background-size со значением cover

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства `background-size` со значением "contain":

Пример свойства CSS background-size со значением "contain":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: contain;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства `background-size` со значением "auto":

Пример свойства CSS background-size со значением "auto":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: auto;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства `background-size` с одним значением длины:

Здесь задано одно значение (260px), поэтому ширина указана явно, а высота возвращается к auto, сохраняя соотношение сторон изображения внутри <div> фиксированного размера.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 260px;
        height: 190px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
        background-size: 260px;
      }
    </style>
  </head>
  <body>
    <h1>CSS background-size property </h1>
    <p>Example of the background-size property with a length value.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Попробовать
auto	Значение по умолчанию. Отображает фоновое изображение в его исходном размере.	Попробовать »
length	Задаёт ширину и высоту фонового изображения. Первое значение — ширина, второе — высота. Если указано только одно значение, второе устанавливается в auto. Задаётся в "px", "em".	Попробовать »
percentage	Задаёт ширину и высоту в процентах. Первое значение — ширина, второе — высота. Если указано только одно значение, второе устанавливается в auto.	Попробовать »
cover	Масштабирует фоновое изображение как можно больше для покрытия всей фоновой области.	Попробовать »
contain	Масштабирует фоновое изображение до максимального размера так, чтобы его ширина и высота вписывались в фоновую область.	Попробовать »
initial	Устанавливает свойство в значение по умолчанию.	Попробовать »
inherit	Наследует свойство от родительского элемента.

Советы и связанные свойства

background-size часто комбинируется с background-position и background-repeat для точного управления размещением и масштабированием изображения.
В сокращённом свойстве background размер указывается после позиции, отделяясь косой чертой: background: url("image.jpg") no-repeat center / cover;. При таком способе указания размера позиция обязательна.
Для масштабирования элемента <img> (а не CSS-фона) с управлением обрезкой используйте object-fit — это свойство предлагает аналогичное поведение cover и contain для замещаемых элементов.
cover и contain упрощают создание полноэкранных или адаптивных фонов: сочетание background-size: cover с фиксированным background-attachment создаёт классический полноширинный баннер-герой, масштабирующийся под любой viewport.

Практика

Какие значения может принимать свойство 'background-size' в CSS?

Обзор значений

cover и contain — что выбрать

Изображения с внутренними размерами и без них

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

Синтаксис

Пример свойства background-size:

Результат

Пример свойства background-size со значением "%":

Пример свойства background-size со значением "cover":

Пример свойства background-size со значением "contain":

Пример свойства background-size со значением "auto":

Пример свойства background-size с одним значением длины:

Значения

Советы и связанные свойства

Практика

Пример свойства `background-size`:

Пример свойства `background-size` со значением "%":

Пример свойства `background-size` со значением "cover":

Пример свойства `background-size` со значением "contain":

Пример свойства `background-size` со значением "auto":

Пример свойства `background-size` с одним значением длины: