Управление размером фонового изображения при помощи css. Адаптивные фоновые изображения

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

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

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

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

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

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

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

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров - взгляните на демонстрационную страницу background-size .

Абсолютное изменение размера

Могут применяться единицы измерения.

Background-size: ширина высота;

По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Background-size: 100px 200px;

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

Background-size: 100px; /* аналогично */ background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Background-size: contain;

Заполнение фоном

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

Background-size: cover;

Масштабирование нескольких фонов

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

Background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover , но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

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

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

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

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

В примере 1 устанавливается фоновая фотография, которая занимает всё окно браузера. Для этого пришлось задать высоту html и body как 100%.

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

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

К фону относится также градиент, который также можно масштабировать, тем самым получая самые разные эффекты. Например, добавив background-size к линейному градиенту, мы заставим его повторяться, что образует чередующиеся градиентные полоски (пример 2).

Пример 2. Вертикальные полосы

Результат примера показан на рис. 2.

Рис. 2. Вертикальные градиентные полоски

Вертикальные и горизонтальные полосы можно делать не только градиентными, но и с чёткими краями. Для этого в параметрах градиента надо указать четыре цвета - от 0 до 50% цвет первой полосы и от 50% до 100% цвет второй полосы. Первый цвет с 0% и последний цвет со 100% можно не писать, они добавляется браузером автоматически, поэтому ограничимся всего двумя значениями. В примере 3 показано создание горизонтальных полос высотой 50 пикселов.

Пример 3. Горизонтальные полосы

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Горизонтальные полоски

Поскольку можно одновременно добавлять несколько фонов, перечисляя их параметры через запятую, то же самое допустимо проделать и с градиентами. Только один из цветов должен быть полупрозрачным, иначе градиенты будут перекрывать друг друга. В примере 4 для фона веб-страницы применяется два градиента, пересекающихся под прямым углом, что в сочетании с background-size создаёт клетки.

Пример 4. Два градиента

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 4.

Рис. 4. Клетки

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

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить .

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .

Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:

• заполнить всю страницу одним изображением без пробелов;
• изменение размеров картинки при необходимости (уменьшении окна браузера);
• сохранение пропорций изображения;
• расположение изображения в центре страницы;
• отсутствие полос прокрутки на странице;
• кросс-браузерное решение, подходящее для разных браузеров;
• реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Решение поддерживают почти все популярные в сети:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
• Chrome Whatever+
• IE 9+
• Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";

Но внимание!!! при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS -хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

• IE 9 — работает;
• IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
• IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS -хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Хак работает в:

• Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
• IE 8+
• Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована — скачать можно . В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные «приколы» от IE7 все упомянутые хаки были бы идеальными.

P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.