Свойство background-size масштабирует фоновое изображение согласно заданным размерам.
Может принимать следующие значения:
- значение - задает размер в любых доступных для CSS единицах - пикселы (px), сантиметры (cm), em и др.;
- проценты - задает размер фоновой картинки в процентах от ширины или высоты элемента;
- auto - если задано одновременно для ширины и высоты (auto auto), то размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки;
- cover - масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока;
- contain - масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
Свойства background-clip и background-origin
Свойства background-clip и background-origin очень похожи и задают принцип размещения фона или фоновой картинки относительно элемента: часть фона будет залазить под границу, фон не будет залазить под границу или фон будет размещаться только над содержимым элемента (то есть padding отодвинет фон).
Разница между свойствами следующая: background-origin задает позицию только фоновой картинки, а background-clip - фона вообще (и картинки, и просто заливки цветом через background-color).
Свойство background-origin не работает, когда свойство background-attachment имеет значение fixed.
При задании свойства background-repeat в значении repeat свойство background-origin всегда работает как при значении border-box.
Значения свойств:
- border-box – фон (фоновая картинка) "залезет" под границу;
- padding-box - фон (фоновая картинка) не будет "залезать" под границу;
- content-box - фон (фоновая картинка) будет только над содержимым.
