⑧ Размер изображений: свойство background-size

Продолжим изучение темы CSS - фон. Если пропустили прошлые статьи, то вот ссылки на них:

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

background-size

Значения:

auto - Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
длина - Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em.
% - Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
cover - Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain - Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

background-size: cover;
background-size: contain;
background-size: 50%;
background-size: 3.2em;
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: 50%, 25%, 25%;
background-size: 6px, auto, contain;
background-size: inherit;
background-size: initial;

📷 Рис. 8. Свойство background-size

Продолжение в следующей статье!