Масштабирование фона

Разрешение мониторов постоянно растёт и при вёрстке веб-страниц приходится учитывать самый широкий диапазон разрешений. Это особенно важно при использовании фонового рисунка, который либо обрезается при низком разрешении монитора, либо, наоборот, целиком не помещается при высоком разрешении. Одним из решений подобной ситуации является масштабирование фона. Конечно, это сулит некоторые неприятности вроде появления искажений и артефактов в изображениях, но и расширяет арсенал средств вёрстки.

Управлением размером отвечает свойство background-size, в качестве значения можно указывать ключевое слово cover, тогда размер изображения будет такой, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы); ключевое слово contain масштабирует картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. Кроме того, допустимо указывать явные размеры по горизонтали или вертикали в процентах или других единицах CSS. На рис. 1 показано изменение размеров изображений при разных значениях background-size. Серым цветом выделен блок размером 280х200 пикселей, внутри которого устанавливается фон.

а. Исходные изображения

б. Значение cover

в. Значение contain

г. Значение 100% 100%

д. Значение 250px

Рис. 1. Вид фоновых картинок в зависимости от значения background-size

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

В примере 1 устанавливается фоновая фотография, которая занимает всё окно браузера.

Пример 1. Фоновая картинка

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

Рис. 2. Фоновая фотография