Вы здесь

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;
}