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

Устанавливает размер фонового изображения.

CSS синтаксис

background-size: auto | размеры | % | cover | contain | initial | inherit;

Возможные значения

ЗначениеОписание
autoЗначение по умолчанию. Изображение примет свои реальные размеры.
размерыЗадает ширину и высоту фонового изображения. Первое значение - ширина, второе - высота. Если задается только одно значение, то второе по умолчанию будет "auto".
%Задает ширину и высоту фонового изображения в процентах от размеров родительского элемента. Первое значение - ширина, второе - высота. Если задается только одно значение, то второе по умолчанию будет "auto".
coverМасштабирует фоновое изображение до максимально возможных значений, так чтобы область фона была полностью закрыта фоновым изображением. При этом некоторые участки фонового изображения могут выходить из поля видимости области позиционирования фона.
containМасштабирует изображение до максимального размера, так чтобы его ширина и высота могли заполнить область содержимого.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Пример №1

Установим размер фонового изображения


div {
     background: url(img_flwr.gif);
     background-size: 80px 60px;
     background-repeat: no-repeat;
}

Пример №2

Растяним фоновое изображение, чтобы оно заполнило всю область содержимого


div {
     background: url(img_flwr.gif);
     background-size: 100% 100%;
     background-repeat: no-repeat;
}