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

Вот что еще есть по поводу адаптивных изображений для сайта:

Если Вы хотите сделать фон действительно неповторимым, тогда рекомендую следующую статью:

Как это выглядит смотрите на реальном примере:

Скачать

Ниже Вы можете увидеть как фоновое изображение адаптируется под различные устройства:

Как сделать адаптивное фоновое изображение для сайта?

HTML часть

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

CSS часть

Осталось только задать в файле стилей необходимые свойства, чтобы сделать задуманное — адаптивное фоновое изображение для сайта:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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: url(background-photo.jpg) center center cover no-repeat fixed; */ }

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

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

Будем использовать Media Queries (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:

Что мы сделали? Если ширина окна браузера на устройстве будет менее 767 пикселей, то будем использовать другое изображение. Всё очень просто.

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

С картинками в теге 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 */ }

Добавляем фон

Полученный элемент масштабируется как надо, но если добавить фоновое изображение, результат будет не очень хорошим. Используем атрибут background-size: cover . К сожалению, в Internet Explorer 8 такой способ не работает. Чтобы решить эту проблему, позиционируем фон с помощью background-position . Фоновая картинка должны быть по ширине как минимум равна max-width элемента. В обратном случае картинка будет обрезаться.

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 */ }

Использование SCSS для расчета

Атрибуты padding-top and height можно рассчитывать автоматически при помощи препроцессоров, например SCSS . Пример этого:

/* 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); }

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

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

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

img { width : 100% ; height : auto ; }

img { width: 100%; height: auto; }

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

div.container { width : 96% ; max-width : 960px ; margin : 0 auto ; /* центрируем основной контейнер */ } img { width : 100% ; /* ширина картинки */ height : auto ; /* высота картинки */ }

div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }

Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.

Адаптивные изображения в колонках

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.

1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.

img { width : 32% ; display : inline-block ; }

img { width: 32%; display: inline-block; }

Условная расстановка адаптивных изображений

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

/* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } }

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

Адаптивное изображение на всю ширину экрана

Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.

.container { width : 100% ; } img { width : 100% ; }

Container { width: 100%; } img { width: 100%; }

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

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

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

В нашем сегодняшнем руководстве мы расскажем вам о разработке структуры главной страницы, и добавим туда функционал 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 получится красиво. Если у тебя картина идет под одной гаммой, это может быть серым или на градиентах, то здесь не применять эту методику. Так как он только идет под изображение, что встречаются на таких тематических ресурсах, как кино онлайн, и также на многих темах можно встретить. Если у вас сейчас установлена картинка, то можете посмотреть на любом онлайн-сервис, где увидите, что картинка просто расплывется, и если есть описание, то не понять на каком отрезке заднего вида оно размещено.

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

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

Это при проверке, если на главной идет под широком монитор, то здесь где то под планшет.

Приступаем к установке:

CSS

html, body{
height: 100%;
}
body {
background-image: url(http://сайт/ABVUN/sarunolas/zornet/kotas/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #8c8383;

Div, body{
margin: 0;
padding: 0;
font-family: exo, sans-serif;

}
.techniqu-lodmakin {
height: 100%;
width: 100%;
}

Tenenbireg-wseviewpos {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 51%;
bottom: 0;
display: block;
position: absolute;
background-color: rgba(41, 39, 39, 0.67);
color: #dcf0f7;
padding: 0.7em;
text-shadow: 0 1px 0 #383535;
}

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

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

Также прикреплен пример с GitHub.