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

CSS-свойство background-size определяет размер фоновых изображений.

Значение по умолчанию:	`auto auto`
Применяется к:	Все элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

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

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

Примеры написания кода свойства background-size:

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
}

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

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
length	Устанавливает ширину и высоту фонового изображения в пикселях. Первое значение задает ширину, а второе — высоту. Если указано только одно значение, второе считается `auto`. Отрицательные значения длины не допускаются.
percentage	Устанавливает ширину и высоту фонового изображения в процентах от доступной области. Первое значение задает ширину, а второе — высоту. Если указано только одно значение, второе считается `auto`. Отрицательные значения в процентах не допускаются.
`auto`	Значение `auto` для одного измерения масштабирует фоновое изображение в соответствующем направлении, так что сохраняется его внутренняя пропорция. Если значение `auto` указано для обоих измерений, фоновое изображение содержит собственную ширину и высоту, что является поведением по умолчанию.
`cover`	Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до наименьшего размера, чтобы его ширина и высота могли полностью покрывать всю доступную область.
`contain`	Масштабирует изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до максимального размера, чтобы его ширина и высота могли поместиться в доступную область.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего свойства родительского элемента `background-size`.