Размер фонового изображения: background-size

background-size

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Версии браузеров 3.0 3.6 9.0 10.0 4.1
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.3 4.0 7 12.0 5.1
Свойство
background-size — это свойство позволяет определить размер фонового изображения
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
значение длины в абсолютных единицах | значение длины в относительных единицах | auto | cover | contain | inherit
Значение по умолчанию
auto auto
Правила записи
свойство: значение значение;

  • значение должно состоять из двух значений, если указывается только одно, то второе получает значение auto
Примеры

<div>

В этом контейнере размер изображения будет рассчитан по умолчанию

</div>

<div>

В этом контейнере второе значение изображения рассчитывается автоматически

</div>

<div>

В этом контейнере размер изображения будет 30×10 пикселей

</div>

<div>

В этом контейнере размер изображения будет 1.2em x 2em

</div>

<div>

В этом контейнере размер изображения будет 60% x 70%

</div>

<div>

В этом контейнере изображение растянется до размера контейнера

</div>

<div>

В этом контейнере размер изображения будет подогнан под размер контейнера

</div>

</div>

Это значит что свойство наследует значение от родителя

</div>

Поделиться