background-size

Пространства, не покрытые изображением фона, заполняются свойством background-color, а цвет фона будет виден под изображениями фона, имеющими прозрачность/полупрозрачность.

/* Keyword values */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Global values */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

Свойство background-size задается одним из следующих способов:

• Используя ключевые слова contain или cover.
• Используя только значение ширины, в этом случае высота устанавливается по умолчанию в auto.
• Используя как значение ширины, так и значение высоты, в этом случае первое значение устанавливает ширину, а второе — высоту. Каждое значение может быть <length>, <percentage> или auto.

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

contain

Масштабирует изображение как можно больше внутри контейнера без обрезки или растяжения изображения. Если контейнер больше изображения, это приведет к чередованию изображения, если свойство background-repeat не установлено в значение no-repeat.

cover

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

auto

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

<length>

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

<percentage>

Растягивает изображение в соответствующем измерении до указанного процента области размещения фона. Область размещения фона определяется значением background-origin (по умолчанию, область отступа). Однако, если значение background-attachment фона равно fixed, область размещения вместо этого является всем вьюпортом. Отрицательные значения не допускаются.

Вычисление значений зависит от внутренних размеров (ширины и высоты) и внутренних пропорций (отношение ширины к высоте) изображения. Эти атрибуты следующие:

• Растровое изображение (например, JPG) всегда имеет внутренние размеры и пропорции.
• Векторное изображение (например, SVG) необязательно имеет внутренние размеры. Если у него есть как горизонтальные, так и вертикальные внутренние размеры, у него также есть внутренние пропорции. Если у него нет размеров или только один размер, у него могут или не могут быть пропорции.
• CSS <gradient> не имеют внутренних размеров или внутренних пропорций.
• Изображения фона, созданные с помощью функции element(), используют внутренние размеры и пропорции генерирующего элемента.

На основе внутренних размеров и пропорций вычисляется размер отрисованного изображения фона следующим образом:

• Если оба компонента background-size указаны и не auto: Изображение фона отрисовывается с указанным размером.

• Если background-size равен contain или cover: Сохраняя свои внутренние пропорции, изображение отрисовывается с максимальным размером, который помещается в или покрывает область размещения фона. Если у изображения нет внутренних пропорций, то оно отрисовывается с размером области размещения фона.

• Если background-size равен auto или auto auto:

  • Если у изображения есть как горизонтальные, так и вертикальные внутренние размеры, оно отрисовывается с этим размером.

  • Если у изображения нет внутренних размеров и нет внутренних пропорций, оно отрисовывается с размером области размещения фона.

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

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

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

  Примечание: Изображения SVG имеют атрибут preserveAspectRatio, который по умолчанию эквивалентен contain; явное указание background-size приводит к тому, что preserveAspectRatio игнорируется.

• Если background-size имеет один auto компонент и один не-auto компонент:

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

background-size = 
  <bg-size>#  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<length-percentage> = 
  <length>      |
  <percentage>  

Рассмотрим большое изображение, логотип Firefox размером 2982x2808. Мы хотим выложить четыре копии этого изображения в элемент размером 300x300 пикселей. Для этого мы можем использовать фиксированное значение background-size в 150 пикселей.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Результат

См. Изменение размеров изображений фона для получения дополнительных примеров.

• Изменение размера фоновых изображений
• Масштабирование фоновых изображений SVG
• object-fit