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

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

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

Попробуйте

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/hand.jpg");
  min-width: 100%;
  min-height: 100%;
}

Синтаксис

/* 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 размером 2982 × 2808 пикселей. Нужно разместить четыре копии этого изображения мозаично в элементе размером 300 × 300 пикселей. Для этого можно задать фиксированное значение 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