background-size
Поддержка браузерами
12.0+ | 9.0+ | 4.0+ | 4.0+ | 10.5+ | 4.1+ |
Описание
CSS свойство background-size указывает размер для фонового изображения.
Значение по умолчанию: | auto |
---|---|
Применяется: | ко всем элементам |
Анимируется: | да |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.backgroundSize="60px 80px" |
Синтаксис
background-size: auto|величина|cover|contain|inherit;
Значения свойства
Значение | Описание |
---|---|
auto | Значение по умолчанию. Фоновое изображение отображается в своем исходном размере. |
величина | Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, второе значение будет вычисляться автоматически с сохранением пропорций изображения. Величина может быть указана в любых единицах измерения, используемых в CSS. При использовании двух значений (для установки ширины и высоты), они разделяются пробелом. |
% | Устанавливает ширину и высоту фонового изображения в процентах. Если задано только одно значение, размер фонового изображения вычисляется в зависимости от ширины элемента. Если указано два значения, первое значение устанавливает ширину изображения в зависимости от ширины элемента, второе значение указанное в процентах вычисляется в зависимости от высоты элемента. При использовании двух значений (для установки ширины и высоты), они разделяются пробелом. |
cover | Масштабирует фоновое изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте элемента (в зависимости от того, что у него имеет больший размер - ширина или высота). |
contain | Масштабирует фоновое изображение с сохранением пропорций так, чтобы фоновое изображение целиком поместилось внутри элемента. |
Пример
CSS Свойство:
background-size:
Результат:
CSS Код:
div {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-size: 100px 100px;
}
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-size: 100px 100px;
}