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