CSS свойство background-size.

Опубликовано: 18 февраля 2014      Автор:

В ранних версиях CSS спецификации веб-разработчики не имели возможности изменять размерность фонового изображения. При назначении картинки в качестве фона какого-либо элемента страницы, изображение сохраняло свои фиксированные собственные размеры, что не всегда было удобно. В новой версии спецификации CSS3 введено дополнительное свойство background-size, предназначенное для манипуляции размерами фона. Это значительно упрощает процесс создания «отзывчивых» сайтов с адаптивным дизайном путем сжатия или растягивания фоновых изображений в зависимости от разрешения монитора и/или размера окна браузера.

CSS свойство background-size может принимать несколько допустимых значений, которые рассмотрены ниже.

Установка абсолютных размеров.

Для наглядных примеров в рамках данной статьи возьмем изображение fish.png с исходными размерами 200 х 150 пикселей, которое будет использоваться в качестве фона для <div> элемента с явно заданной шириной 270px и высотой 320px.

div {
width: 270px;
height: 320px;
border: 2px solid #000000;
background: url("images/fish.png") no-repeat;
}
Пример

В данном случае значения ширины и высоты фонового изображения должны определяться с указанием единиц измерения (px, em и др.)

Первое значение определяет ширину, а второе – высоту вставляемой картинки. Если указано только одно числовое значение, то оно рассматривается как ширина, а высота в этом случае принимает значение по умолчанию — auto и при отображении фоновой картинки сохраняются пропорции, предусмотренные собственными размерами файла изображения. Это позволяет с большой точностью выставлять нужную размерность картинки.

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

div {
background-size: 130px;
}

div {
background-size: 200px 200px;
}

Абсолютные значения

Результаты такого форматирования: первый случай с одним значением (130px), которое обрабатывается как ширина; и второй (200px 200px).

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

Процентные значения.

В этом случае также допускается одно или два значения, позволяющие задать относительную размерность изображения. Еще пару примеров:

div {
background-size: 80% auto;
}
div {
background-size: 100% 100%;
}
Процентные значения

Результаты форматирования: 1) с заданной только шириной 80%; 2) фоновое изображение растягивается 100% в ширину и в высоту.

Теперь ширина и высота фоновой картинки зависит от размеров элемента контейнера. В первом примере фоновое изображение растягивается по горизонтали на величину, равную 80 процентам ширины дива, а высота будет вычисляться браузером с учетом собственных пропорций изображения. Последнее значение в данном случае можно не указывать, так как при его отсутствии оно устанавливается в auto по умолчанию. Но для того, чтобы явно указать относительную высоту фона, необходимо указать оба значения, предварительно задав его ширину:

div {
background-size: auto 80%;
}
Процентные значения 2

Так как одно значение, это всегда ширина, то в данном случае необходимо явно указать значение высоты в качестве второго параметра.

Процентные значения данного свойства значительно облегчают создание так называемых «резиновых» сайтов и мобильных версий веб-приложений, так как это максимально упрощает реализацию адаптивного подхода.

Ключевое слово 'contain'.

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

Дословный перевод этого свойства позволяет понять принцип его действия. «Contain», значит «содержать», то есть форматируемый таким образом элемент должен полностью охватить используемое в качестве его фона изображение. Если пропорции размеров изображения и элемента контейнера не совпадают (что зачастую и происходит), то лишь одна размерность (ширина или высота) фоновой картинки будет подогнана под соответствующую размерность контейнера. Величина второй размерности будет вычисляться в соответствии с собственными пропорциями изображения, а это приводит к тому, что определенная область элемента контейнера остается не заполненной фоновым рисунком. То есть в данном случае целью является полное вмещение фонового изображения в элемент.

div {
background-size: contain;
}
Ключевое слово contain

Ширина картинки подгоняется под ширину элемента контейнера (<div>). Изображение вмещается, но фоновая область элемента заполнена им лишь частично. Так происходит потому, что пропорции изображения не изменяются.

Ключевое слово 'cover'.

Этот вариант имеет некоторую схожесть с предыдущим, но приводит к другому результату. Используемое ключевое слово говорит само за себя — «cover», значит «покрывать», то есть фоновое изображение должно полностью заполнить область форматируемого элемента. В том случае, если пропорции размеров изображения и элемента не совпадают, то как и в предыдущем случае одна из размерностей изображения подгоняется под соответствующую размерность элемента контейнера, но теперь эта размерность выбирается с таким расчетом, чтобы после ее выравнивания по элементу, вторая размерность была не меньше, чем соответствующая ей размерность элемента. Те части изображения, которые в результате такого форматирования выходят за границы элемента, просто обрезаются, оставляя видимой лишь угловую область изображения. То есть в данном случае целью является заполнение всей доступной области элемента контейнера.

div {
background-size: cover;
}
Ключевое слово cover

Теперь высота картинки подгоняется под высоту дива, поскольку если подгонять ширину, то фоновая область элемента не будет заполнена полностью, но изображение в данном случае обрезается.

'contain' vs 'cover'

Стоить обратить внимание на то, что в обоих последних случаях, когда применяются значения contain и cover, при изменении размеров элемента контейнера, фоновое изображение также будет пропорционально менять свои размеры. То есть искажения фонового изображения не происходит. Различия от использования этих значений видны лишь в том случае, когда имеет место несоответствие соотношений размерностей изображения и элемента, а если они совпадают, то фон идеально вписывается в область элемента контейнера в обоих случаях, без каких-либо побочных эффектов типа обрезания изображения или частичного заполнения элемента фоном.

Последние два значения предназначены для тех ситуаций, когда разработчик по каким-либо причинам не имеет возможности контролировать размерность фонового изображения и должен идти на компромисс между целостностью изображения и полным заполнением фона элемента.

Поддержка браузерами.

В связи с тем, что поддержка CSS3 спецификации еще не полностью реализована во всех широко используемых браузерах, тем более в их ранних версиях, то применение свойства background-size весьма ограничено. Для предыдущих версий некоторых браузеров используются специальные вендорные префиксы, позволяющие применить это свойство. Так для Opera, начиная с версии 9.6 и заканчивая 10.53, работает свойство -o-background-size. Браузеры на основе движка webkit (Safari выше третьей версии и Chrome) поддерживают аналогичное свойство -webkit-background-size. В Firefox версии 3.6 работает -moz-background-size, а уже в четвертой версии этого браузера введена поддержка свойства background-size без префикса. Более поздние версии всех ведущих браузеров полностью поддерживают спецификацию CSS3, а соответственно, и данное свойство.