background-size

Описание

Значение background-size  в CSS позволяет задавать размер фонового изображения. Размер изображения может быть полностью ограничен или только частично, чтобы сохранить его внутреннее соотношение.

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

Начальное значениеauto auto
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыотносительно области позиционирования фона
Отображениевизуальный
Обработка значениякак указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typerepeatable list of simple list of length, percentage, or calc
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Ключевые слова */
background-size: cover;
background-size: contain;

/* Указано одно значение - ширина изображения, */
/* высота в таком случае устанавливается в auto */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* Указаны два значения - */
/* ширина и высота соответственно */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Значения для нескольких фонов */
/* Не путайте такую запись с background-size: auto auto */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Глобальные значения */
background-size: inherit;
background-size: initial;
background-size: unset;

Значения

<размер>
Значение <length>, позволяет масштабировать размер фонового изображения в заданном пространстве. Отрицательный размер не допускается.
<проценты>
Значение <percentage> которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.
auto
Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением сохраняя его пропорции.
contain
Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций
cover
Ключевое слово, обратное contain. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.

Интерпретация возможных значений зависит от внутренних размеров изобиражений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты).  Растовое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию).  Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию.  Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.

Предупреждение: Это поведение изменилось в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропоцией, идентичной пропорции области расположения фона.

Фоновые изображения, сгенерированные из элементов с использованием -moz-element (которые фактически соответсвуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответсвующей внутренней пропорцией.

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

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

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

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

Формальный синтаксис

<bg-size>#

где
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain

где
<length-percentage> = <length> | <percentage>

Примеры

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

Замечания

Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автомастическую составную часть, или задается с использованием только значения ширины (для примера, background-size: 50%).  Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии со CSS3 спецификацией background-size и со CSS3 спецификацией градиента значений изображения.

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* Лучше не использовать */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* Допускается */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

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

Спецификации

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background-size' в этой спецификации.
Кандидат в рекомендации Первоначальное определение

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 1.0-webkit [2] 3.6 (1.9.2)-moz [4] 9.0 [5] 9.5-o
with some bugs [1]
3.0 (522)-webkit
but from an older CSS3 draft [2]
3.0 4.0 (2.0) 10.0 4.1 (532)
Поддержка значений
contain и cover
3.0 3.6 (1.9.2) 9.0 [5] 10.0 4.1 (532)
Поддержка SVG фонов 44.0 8.0 (8.0) 9.0 31.0 ?
Особенность Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
Базовая поддержка (Да)-webkit
2.3
1.0-moz
4.0
? ? 5.1 (maybe earlier)
Поддержка SVG фонов ? 8.0 (8.0) ? ? ?
  • [1] В Opera 9.5 вычисление области расположения фона некорректно для фиксированных фонов.  Opera 9.5 также интерпретирует форму с двумя значениями как горизонтальный масштабный коэффициент и, по-видимому, вертикальное измерение отсечения. Это было исправлено в Opera 10.
  • [2] Браузеры на основе WebKit изначально реализовали более старый черновик  CSS3 background-size, в котором пропущенное второе значение рассматривается как дублирующее первое значение; этот черновки не включает в себя ключевые слова contain или cover .
  • [3] Konqueror 3.5.4 поддерживает -khtml-background-size.
  • [4] Хотя это свойство является новым в Gecko 1.9.2 (Firefox 3.6),  в Firefox 3.5 можно полностью растянуть изображение поверх фона, используя -moz-border-image.
    .foo {
      background-image: url(bg-image.png);
    
      -webkit-background-size: 100% 100%;           /* Safari 3.0 */
         -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
           -o-background-size: 100% 100%;           /* Opera 9.5 */
              background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
     
      -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
    }
  • [5] Хотя Internet Explorer 8 не поддерживает значение background-size, с помощью нестандартного атрибута-ms-filter  возможно воспроизвести некоторые его возможности:
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
    Это иметируте значение cover.

Смотрите также