background-size
Обновлено: 08.12.2022
background-size
Масштабирует фоновое изображение, согласно заданным размерам.
Краткая информация
| Значение по умолчанию | auto |
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
background-size: <bg-size> [, <bg-size> ]*
<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain
Значения
| <размер> | Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др. |
| <проценты> | Задаёт размер фоновой картинки в процентах от ширины или высоты элемента. |
| auto | Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки. |
| cover | Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. |
| contain | Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. |
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Пример
Объектная модель
Объект.style.backgroundSize
Примечание
Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.
Opera до версии 10.53 использует свойство -o-background-size.
Firefox до версии 4 использует свойство -moz-background-size.
Opera 9.5 некорректно устанавливает положение фиксированного фона.