Масштабирует фоновое изображение, согласно заданным размерам.
Краткая информация
| Значение по умолчанию | 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. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.