В рекламном мире стремятся использовать каждый дюйм пространства, которое отведено для бренда или под изображение продукта, поэтому все более популярно проектирование веб-сайтов, у которых внешний фон заполняет все окно браузера . Используя CSS, достигнуть этого легко. Достаточно прописать соответствующую строчку кода:
Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; }
Пример 1 показывает отцентрированное фоновое изображение 1280px X 960px , где видимая область зафиксирована (то есть она не прокручивается вместе с документом).
Но какого размера необходимо изображение? Мониторы и операционные системы развиваются достаточно быстро, и как результат мы имеем большой диапазон экранных разрешений. Наиболее популярные разрешения сегодня: 1024x768px , 1280x800px , 1280x1024px , и 1440x900px . Однако с появлением HD мониторов и профессиональных дисплеев, которые поддерживают разрешение до 2560x1600px , вариантов становится еще больше.
Существует также много случаев, где необходимо низкое разрешение. Многие пользователи уменьшают окно своего браузера с целью освободить пространство экрана для других целей, в то время как ряд мониторов держит разрешение в 800x600px . Также не будем забывать о возрастающей роли карманных компьютеров.
Вместо того чтобы использовать одно фиксированное изображение определенного размера, не лучше ли будет масштабировать изображение в зависимости от размеров окна? К сожаления, CSS 2.1 не дает возможности масштабировать фоновое изображение.
Существует несколько искусственных приемов, однако все они полагаются на элемент HTML img (вместо фона в CSS). Также в этих способах используют абсолютное позиционирование для слоев или таблиц или скрипты, позволяющие изменять размеры изображения. К тому же не все из этих методов сохраняют пропорции изображения, растягивая изображения совершенно нереалистично.
W3C CSS определяет свойство background-size , которое отвечает нашим запросам.
Интересные значения:
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока .
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
Contain В этом случае изображение полностью поместится в браузере , опуская (скрывая) непрозрачные поля у верхней-нижней или левой-правой стороны, когда пропорции у фонового изображения и окна браузера не совпадают (в примере образуются пустое черное пространство). В результате изображения выглядит "обрезанным ". В примере 2 код примера 1 был дополнен свойством background-size со значением Contain .
Cover . В этом случае изображение полностью заполнит смотровое окно , при этом в процессе будут отрезаны «уши» или «волосы» (они уйдут за пределы монитора), но визуально изображение не будет выглядеть "обрезанным". Данный метод я предпочитаю всем остальным. Вы можете контролировать выравнивание изображения внутри окна с помощью свойства background-position . В примере 3 мы снова дополнили код примера 1 , но на этот раз свойством background-size со значением cover .
Вы разрешаете фону масштабироваться, добавив следующий код:
Body { background: #000 url(myBackground_1280x960.jpg) » center center fixed no-repeat; -moz-background-size: cover; background-size: cover; }
Свойство background-size уже поддерживается браузером Firefox 3.6 (используя префикс –moz; Firefox 4 будет использовать свойства CSS3), Chrome 5, Safari 5, and Opera 10.54; и будет включено в Internet Explorer 9. Старший webkit и версии Opera уже поддерживают свойство background-size , однако их реализация основана на предыдущих проектах, которые не включают ключевые слова Contain и Cover .
Отрицательная сторона этого метода в том, что нет специальных свойств, которые задают минимальную ширину и высоту фонового изображения. При уменьшении окна браузера до небольшого размера, размер фонового изображения также уменьшится до маленького, причем результат такого масштабирования изображения бывает часто нежелательным.
Модуль (W3C CSS3 Media Queries Module) привнесет условные правила, которые обеспечат условный порядок при ранжировании высоты и ширины фона. Это позволит нам осуществить масштабирование фона от минимальной ширины/высоты и выше. Media queries поддерживается Firefox 3.5, Chrome, Safari 3, Opera 7 и также будет включен в Internet Explorer 9.
Следующие стилевые правила скажут браузеру о том, что нельзя масштабировать фоновое изображение по доститжению размеров 1024x768px .
Body
{
background: #000 url(myBackground_1280x960.jpg) »
center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
@media only all and (max-width: 1024px) and (max-height: 768px)
{
body
{
-moz-background-size: 1024px 768px;
background-size: 1024px 768px;
}
}
Примечание, 1024x768px имеет те же пропорции, что и фоновое изображение (1280x960px ). Когда применяют различные соотношения (пропорции) можно получить внезапный скачок при уменьшении окна браузера.
В наших финальных примерах, четыре и пять , добавлены @media правила, таким образом, наше фоновое изображение не масштабируется ниже 1024 X 768 пикселей. Пример пять показывает, что если у свойства background-position значение равно left-bottom вместо center-center , мы можем контролировать способ выравнивания фонового изображения в пределах окна браузера.
background-position значение равно left-bottom.
Одна из основных задач при адаптивной верстке - это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.
С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.
Данный трюк заключается в установке значения в процентах отступам (padding ) элемента. Впервые способ опубликован в старой статье блога A List Apart , однако он до сих пор хорошо работает.
Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон - 16:9. В коде ниже для отступов используется px , но все будет работать и с em . Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv .
Div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ }
Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }
Предположим, что есть большое фоновое изображение, которое отлично смотрится на десктопе. Но на мобильном устройстве оно будет слишком мелкое, поэтому правильным решением станет уменьшение ширины фона.
Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top :
На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top , начальная высота (start height) - атрибуту height . В итоге получается код:
Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }
/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); }
От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.
В настоящее время довольно популярным стало использование в качестве фона огромной фотографии, которая занимает всю веб-страницу. Вот примеры нескольких сайтов, у которых установлены адаптивные целые фоновые изображения:
Если вы хотели бы добиться похожего результата в вашем следующем веб-проекте, тогда эта статья – это то, что вам нужно.
Вот наш план действий.
Используйте свойство background-size, чтобы полностью заполнить окно просмотра
CSS-свойство background-size имеет значение cover. Значение cover сообщает браузеру о том, что необходимо автоматически и пропорционально масштабировать ширину и высоту фонового изображения, чтобы они всегда были равны или были больше ширины/высоты окна просмотра.
Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств
Чтобы улучшить скорость загрузки страницы на маленьких экранах, мы будем использовать медиа-запрос для обработки уменьшенной версии нашего фонового изображения. Это необязательно. Эта техника будет работать и без этого. Но почему использование небольшого фонового изображения для мобильных устройств является хорошей идеей?
Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.
Такая огромная дополнительная нагрузка только ради размещения фоновой фотографии в любом случае не принесет ничего хорошего. И, безусловно, это исключительно плохо скажется на соединениях, использующих мобильный Интернет. А также такое разрешение является излишним для устройств с маленьким экраном (подробнее на этом остановимся позже). Давайте рассмотрим весь процесс.
Для разметки потребуется только это:
Мы собираемся назначить фоновое изображение для элемента body, чтобы изображение всегда полностью занимало окно просмотра браузера.
Тем не менее, эта техника будет также работать для любого блочного элемента (например, div или form). Если ширина и высота вашего блочного элемента является «резиновой», тогда фоновое изображение всегда будет масштабироваться таким образом, чтобы занять весь контейнер.
Задаем следующие стили для элемента body:
body { /* Путь до изображения */ background-image: url(images/background-photo.jpg); /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */ background-position: center center; /* Фоновое изображение не повторяется */ background-repeat: no-repeat; /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */ background-attachment: fixed; /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */ background-size: cover; /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */ background-color: #464646; }
body { /* Путь до изображения */ background - image : url (images / background - photo . jpg ) ; /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */ /* Фоновое изображение не повторяется */ background - repeat : no - repeat ; /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */ /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */ background - size : cover ; /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */ background - color : #464646; |
Наиболее важная пара свойство/значение, на которую следует обратить внимание:
background-size: cover;
background - size : cover ; |
Вот, где начинается волшебство. Эта пара свойство/значение сообщает браузеру о том, что нужно масштабировать фоновое изображение пропорционально, т.е. чтобы его ширина и высота были равны или были больше, чем ширина/высота элемента (в нашем случае это элемент body).
Однако у данной пары свойство/значение есть одна проблема: если фоновое изображение меньше размеров элемента body – что произойдет на экранах с высоким разрешением и/или когда у вас огромное количество контента на странице – браузер неизбежно увеличит масштаб изображения. И, как мы знаем, когда мы увеличиваем размеры растрового изображения, качество изображения снижается (другими словами, происходит пикселизация).
Увеличение размера изображения относительно исходных размеров сказывается на качестве изображения. Помните об этом, когда будете выбирать подходящее изображение. В демо-примере используется огромная фотография размером 5500x3600px для широкоформатных мониторов, поэтому потребуется очень большой экран, чтобы произошло искажение качества. Давайте двигаться дальше. Чтобы фоновое изображение всегда было по центру окна просмотра, мы пропишем:
background-position: center center;
background - position : center center ; |
Данная запись располагает фон на координатной оси по центру окна просмотра. Далее нам нужно определить, что будет происходить, когда высота контента превышает видимую высоту окна просмотра. Когда это происходит, появляется полоса прокрутки.
В данном случае нам необходимо сделать так, чтобы фоновое изображение оставалось на исходном месте, даже когда пользователь прокручивает страницу вниз. В данной ситуации изображение либо просто закончиться при прокрутке, либо будет перемещаться по ходу прокрутки (что может сильно отвлекать пользователя). Чтобы зафиксировать фон, мы указываем для свойства background-attachment значение fixed.
background-attachment: fixed;
background - attachment : fixed ; |
В демо-примере я добавил возможность «подгрузить контент», чтобы вы могли посмотреть, что происходит при появлении полосы прокрутки в браузере, когда для свойства background-attachment задано значение fixed. Вы также можете загрузить демо-пример и поиграть со значениями свойств, отвечающих за расположение элементов (например, background-attachment и background-position), чтобы посмотреть, как это повлияет на прокрутку страницы и фоновое изображение. Остальные значения свойств сами по себе довольно понятны.
Я подробно расписал фоновые свойства, чтобы их было легче объяснить. Равнозначной будет и сокращенная запись:
body { background: url(background-photo.jpg) center center cover no-repeat fixed; }
body { background : url (background - photo . jpg ) center center cover no - repeat fixed ; |
Все, что вам необходимо сделать, это изменить значение url, чтобы указать путь до вашего фонового изображения.
Дополнительно: медиа-запрос для маленьких экранов
Для маленьких экранов я использовал программу Photoshop, чтобы пропорционально уменьшить исходное фоновое изображение до размера 768x505px, а также я воспользовался сервисом Smush.it для того, чтобы еще немного уменьшить размер. Благодаря этому размер файла уменьшился с 1741KB до 114KB. Т.е. размер изображения уменьшился на 93%.
Пожалуйста, не поймите меня неправильно, 114KB это все еще довольно много для чисто эстетического элемента дизайна. Учитывая дополнительную нагрузку в 114KB, я бы стал использовать такой файл, только если бы увидел возможность значительно улучшить опыт взаимодействия пользователя с сайтом (UX), т.к. в настоящий момент значительная доля Интернет трафика приходится на работу мобильных устройств image : url (images / background - photo - mobile - devices . jpg ) ;
У медиа-запроса установлено ограничение по ширине max-width: 767px, которое означает, что если окно просмотра браузера больше 767px, то будет загружаться большое фоновое изображение.
Недостаток использования данного медиа-запроса заключается в том, что если вы измените ширину окна вашего браузера, например, с 1200px до 640px (или наоборот), вы сразу же увидите момент загрузки маленького или большого фонового изображения.
Вдобавок к этому, из-за того, что некоторые устройства с маленьким экраном могут отображать большее количество пикселей – например, iPhone 5 c дисплеем retina способен отобразить разрешение 1136x640px – маленькое фоновое изображение будет пикселизовано.
Вы можете посмотреть более актуальную версию исходного кода из данной обучающей статьи на GitHub . Я могу вас предупредить только об одном: пожалуйста, используйте данную технику с осторожностью, потому что большие файлы могут серьезно повредить UX, особенно если конечный пользователь использует медленное и ненадежное Интернет соединение. Это еще одна причина, почему вам следует подобрать подходящий цвет фона, чтобы пользователь смог прочитать контент, пока фоновое изображение загружается.
Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи .
В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.
Есть несколько способов определения размеров - .
Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:
Данный код масштабирует изображение с 200×200 до 100×100 пикселов.
Если применяются проценты, размеры основываются на элементе, а НЕ изображении:
Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.
| : cover; |
Несколько фонов могут быть масштабированы с помощью списка значений, разделенных запятыми, идущих в том же порядке.
| background : url ("sheep.png" ) 60% 90% no-repeat , url ("sheep.png" ) 40% 50% no-repeat , url ("sheep.png" ) 10% 20% no-repeat #393 ; : 240px 210px , auto , 150px ; |
Все последние версии браузеров поддерживают свойство background-size.
Ну вот, теперь мы знаем, как управлять размерами фонового изображения при помощи каскадных таблиц стилей .
Не забудьте подписаться на обновления блога , чтобы не пропустить новые интересные статьи.
Разрешение мониторов постоянно растёт и при вёрстке веб-страниц приходится учитывать самый широкий диапазон разрешений. Это особенно важно при использовании фонового рисунка, который либо обрезается при низком разрешении монитора, либо, наоборот, целиком не помещается при высоком разрешении. Одним из решений подобной ситуации является масштабирование фона. Конечно, это сулит некоторые неприятности вроде появления искажений и артефактов в изображениях, но и расширяет арсенал средств вёрстки.
За управление размером отвечает свойство 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 позволяет получить самые разнообразные виды фоновых заливок, созданных без применения фоновых изображений.
