CSS-свойство background-size определяет размер фоновых изображений.

Значение по умолчанию: auto auto
Применяется к: Все элементы
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

background-size: length | percentage | auto | cover | contain | initial | inherit

Примеры написания кода свойства background-size:

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
} 

Свойство background-size обычно используется для создания полноразмерных фоновых изображений, которые масштабируются в соответствии с размером области просмотра или с помощью браузера, т.е. устанавливается значение cover

Значения свойств

В следующей таблице описаны значения этого свойства.

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

Поддержка браузеров

Свойство background-size поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.