Как в css сделать фон адаптивный. Адаптивное фоновое изображение с помощью CSS. Отзывчивый фон​ на CSS

», и каким образом разные дизайны применяют этот термин и технологию. Теперь, когда мы ознакомились с некоторыми примерами реализации в действии, давайте попробуем разработать собственный адаптивный сайт!

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

Перед тем, как с головой уйти в процесс разработки HTML-кода, давайте сначала обработаем мета-тэг «viewport». Устройства Apple iPhone и iPod Touch запрограммированы на автоматическое масштабирование вебсайтов в iOS-версии браузера Safari.

Эта технология представляет возможность отобразить веб-сайт полностью на экране, но он будет в уменьшенном виде. Так как мы собираемся задействовать media queries специально для адаптации дизайна под экраны разных размеров, нам не нужно автоматическое масштабирование, предусмотренное в устройствах от Apple. Мета-тэг viewport также позволит вам выставить параметры относительно того, насколько сильно пользователь сможет увеличить или уменьшить ваш сайт. Но главное здесь заключается в возможности выставить исходный масштаб, в котором будет открыт сайт. Конкретно в нашем сегодняшнем руководстве мы рекомендуем вам отображать сайт вообще без масштабирования.

Начав работу с HTML, вы наверняка заметите, что документ состоит из вполне простых HTML5-элементов, за исключением мета-тэга viewport и нашего div’а с основным фоном.

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

Body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea {
margin: 0; padding: 0; border: 0;
}
sh1, h2, h3, h4, h5, h6, p {
margin: 0 0 1em 0;
}
h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}
Теперь, так как мы занимаемся разработкой с нуля, вы можете открыть тэг body и добавить туда стили. Мы выставили цвет фона на белый, а цветом текста был выбран темно-серый. Сочетание черного текста на белом фоне зачастую вызывает ощущение чрезмерного контраста, и у многих посетителей из-за этого рябит в глазах.

Html, body { height: 100%; }
Также обратите внимание на то, что размер шрифта указан в единицах em, и это один из важнейших элементов при разработке адаптивного дизайна, так как размер данной единицы основывается на процентном соотношении. Если вы выставите размер шрифта в пиксельном измерении, то он не будет соответствовать остальному дизайну, если сайт будет уменьшен для корректного отображения на меньших экранах. Буквы либо займут весь экран, либо будут накладываться друг на друга, а это совсем некрасиво.

Мы также можем добавить стиль в наш класс.homeContent и в id #mainBG. Мы определили высоту страницы, выставили ширину на 100%, и центрировали контент в рамках класса.homeContent. ID #mainBG будет отвечать за фоновое изображение, которым в нашем примере является стоковая картинка, полученная у автора . Мы также выставили параметр background-size на cover, что растянет изображение на весь экран, и позволит нашему фоновому изображению сохранять правильные пропорции при отображении на экранах с большим разрешением. Размер нашего фонового изображения «big.jpg» оставляет 1920x1189.

HomeContent {
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
}

#mainBG {
background: url(images/big.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Теперь, когда мы закончили с разработкой основы, давайте внедрим media queries. Первые два запроса будут относиться к планшетным ПК. Посредством этих запросов мы сможем загрузить фоновое изображение среднего размера, так как загрузка большого изображения может отнять как время, так и трафик, и если нам не нужно изображение, в размерах дважды превышающее размер экрана, то его можно и не загружать. Размер нашего фонового изображения «medium.jpg» составляет 1024х770 пикселей. Также мы должны расположить его таким образом, чтобы оно корректно отображалось на всех типах планшетов.

@media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG { background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG { background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
Последний запрос будет относиться к мобильным телефонам. Посредством данного запроса мы будет отображать наше фоновое изображение под названием «small.jpg», размеры которого составляют 767х475.

@media only screen and (min-width: 0px) and (max-width: 767px) {
#mainBG { background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
Предварительный просмотр проделанной работы в браузере. Откройте свой шедевр сначала на весь экран, а затем постепенно уменьшайте окно просмотра. Вы увидите, как изображение незамедлительно начинает изменяться в размерах. Попробуйте определить, в каком положении задействуются media queries и меняется размер изображения.

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

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

Немного истории о динамических веб-ресурсах

Удивительно, однако понятие отзывчивости или адаптивности веб-дизайна появилось достаточно недавно. В 2010 году Итан Маркотт впервые использовал данный термин в одной из своих работ. Это натолкнуло его выпустить книгу, которая называется «Responsive Web Design».

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

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

И как следствие практически каждый веб-ресурс имеет своего собрата мобильной версии.

Так что же под собой подразумевает «отзывчивая» верстка?

Адаптивная верстка – это такой способ написания веб-сервиса, в котором прописано при каких размерах окна идет изменение расположения объектов на странице. Задается она при помощи медиазапросов. Давайте подробнее рассмотрим, что это такое.

Способ применения медиазапросов и его составляющие

Для того чтобы создать медиазапрос (media queries ) нужно использовать специальное слово @ media и это правила.

Такой термин произошел собственно от названия символа @, который нам привычнее называть «собачкой». Далее разработчик прописывает определенные условия динамичности, в которых определяется вид техники, медиафункции и иногда логические операторы.

Ниже я прикрепил таблицу, в которой перечислены основные виды девайсов.

Тип устройства	Пояснение
All	Значение по умолчанию. Как вы уже догадались используется для всех видов устройств.
tv	Указывает, что девайс – это телевизор.
screen	Экран монитора компьютера.
tty	Аппараты с фиксированной размерностью символов. Сюда относятся терминалы, телетайпы, различные устройства с ограничениями экрана.
print	Макет строится под печатающие девайсы.
projection	Используется для протекторов.
handheld	Портативные девайсы (телефоны, планшеты и т.д.)
braille	Указывает, что ресурс будет использоваться слепыми людьми. В основе таких технологий лежит система Брайля.
embossed	Принтеры, использующие выше названную систему.
speech	Сюда относятся все речевые сервисы: браузеры, программы, которые озвучивают текст, и т.д.

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

Так существует 3 основных логических оператора.

Начнем с not . Используется для отрицания свойств. Заметьте, что not обладает низким приоритетом и поэтому он выполняется самым последним в очереди операторов. Пример объявления запроса:

@media handheld and (not screen) { ... }

В первом примере также описан оператор and . Он отвечает за логическое И, т.е. объединяет перечисленные параметры и применяет к ним прописанное условие.

Если же необходимо задавать адаптивные условия для старых версий браузера http://сайт/brauzeryi-vebmastera/kakoy-brauzer-luchshe.html, то стоит использовать слово only. Пример инициализации:

@media only screen and (not print) { ... }

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

@media screen and (max-width: 900px), print and (orientation: portrait) { ... }

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

Для начала хочу отметить, что основная часть функций в составе своего названия имеет приставки min или max . Так, если указано

max-height:840px ,

то условия касаются высоты окна меньше указанной размерности. А если же прописано

m in-height: 950px ,

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

Итак, для девайсов типа tv, print, tty, screen, handheld, и projection существуют такие функции:

Название	Предназначение	Пример
color (min-color, max-color)	Указывает количество бит на один цветовой канал. Например, если указана цифра 3, то общее число цветов равняется 512.	Для цветных дисплеев: @media screen and (color) {div { background: gold; }} Для 512 цветов: @media screen and (min-color:3) { div { background: red; }}
orientation	Описывает внешний вид окна: альбомное представление страницы (landscape) или портретное (portrait).	@media screen and (orientation: landscape) { div{ color: #F8F8FF; }} @media screen and (orientation: portrait) { div { color: #FDF5E6;}}
monochrome (min-monochrome, max-monochrome)	Определяется для монохромных (одноцветных) аппаратов. При указании цифры, вы устанавливаете сколько бит выделяется на 1 пиксел	@media print and (monochrome) { body { font-family: Arial, sant-serif; } h1, h3, p { color: #000; }}

Для всех носителей, кроме речевой техники используются такие медиафункции:

Пример адаптивной веб-страницы

Для примера я сверстал простенькую страницу, при изменении размера которой меняется цвет заголовка сайта.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

Тайны космоса Новости научных открытий Первая новость Вторая новость

Тайны космоса

В этом руководстве мы в деталях изучим технологию создания респонсивного фонового изображения, которое будет занимать всю область просмотра в браузере при любом разрешении. И использовать мы будем CSS — свойство background-size . Без JavaScript :

ПРИМЕР
СКАЧАТЬ ИСХОДНИКИ

Примеры использования адаптивных фоновых изображений

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

Sailing Collective
Digital Telepathy
Marianne Restaurant

Если вы хотите добиться схожей «внешности » в вашем проекте — вы на правильном пути.

Основные понятия

Вот план нашей игры.

Используем свойство background-size для покрытия всей области просмотра

CSS -свойство background-size может принимать значение cover . Значение cover предписывает браузеру автоматически и пропорционально масштабировать фоновое изображение по длине и ширине таким образом, чтобы оно оставалось равным, или же больше, чем ширина/высота области просмотра.

Используем медиа-запрос при получении уменьшенной версии фонового изображения для мобильных устройств

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

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

С этим разрешением мы имеем в плюсе то, что добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время, но в минусе имеем размер изображения. Это около 1,7 Мб.

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

Итак. Приступим.

HTML

Ниже показано все, что понадобится из разметки:

...Содержимое вашей страницы...

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

Однако эта техника сработает на любом блочном элементе (таком как div или form ). В случае если ширина-высота вашего блочного контейнера подвижна, фоновое изображение будет также менять размер, чтобы занять всю область контейнера.

CSS

Мы объявляем свойства элемента 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; }

Самое важное свойство-значение в этом списке:

background-size: cover;

Стоит заострить на нем внимание. Здесь и происходит чудо. Эта пара значения-свойства и дает указание браузеру на масштабирование фонового изображения в таких пропорциях, что высота-ширина будет оставаться равной или превышать высоту-ширину самого элемента. (В нашем случае этот элемент — body .)

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

А как вы знаете, когда мы растягиваем изображение сверх его настоящего размера — мы теряем качество изображения (другими словами появляется пикселизация ):

Когда изображение масштабируется в сторону увеличения родного размера — падает качество изображения .

Не забудьте об этом, когда будете подбирать фон. В демо-примере мы используем фото размером 5500 на 3600px для больших экранов, и потому в этом случае вряд ли произойдет нечто подобное.

Для того чтобы наш фон был выровнен по центру, мы объявили следующее:

background-position: center center;

Это установит масштабирующие оси в центр области просмотра.

Мы сделаем вот что. Установим свойство background-attachment в значение fixed , чтобы быть уверенными в том, что изображение останется на своем месте, даже если мы будем скролить страницу вниз:

background-attachment: fixed;

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

Все что вам остается сделать — скачать демо-пример и немного поэкспериментировать со свойствами позиционирования (background-attachment и background-position ) чтобы увидеть, как они влияют на поведение страницы и фона при прокрутке.

Следующие значения свойств говорят сами за себя.

Краткая запись CSS

Выше, для наглядности, я определял CSS — свойства в полном виде.

А так выглядит краткая запись:

body { background: url(background-photo.jpg) center center cover no-repeat fixed; }

Все, что вам остается сделать, это сменить значение url на путь к вашей картинке.

Опционально: медиа-запрос на получение уменьшенной версии фоновой картинки

Для экранов с меньшим разрешением нам понадобится Photoshop для пропорционального уменьшения разрешения картинки до 768 на 505px . Также я пропустил ее через Smush.it для уменьшения размера файла. Это позволило уменьшить размер с 1741 до 114 килобайт. Это уменьшило объем файла на 93%.

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

А вот и сам медиа-запрос:

Ключевая часть медиа-запроса заключена в свойстве max-width: 767px , которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.

Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px (или наоборот ), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.

И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina -дисплеем разрешением в 1136 на 640px , меньшее изображение будет выглядеть некрасиво.

Заключение

Весь использованный в этом руководстве код вы можете взять с GitHub .