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

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

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

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

Скачать

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

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

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 пикселей, то будем использовать другое изображение. Всё очень просто.

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

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

Для начала понадобятся два изображения-фона, первое изображение должно быть как минимум широкоформатным 1920*1080, этим мы добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время.

Второе изображение будет уменьшенной версией первого фонового изображения, но только для мобильных устройств. Допустим эти изображения будут иметь разрешения 1920*1080 и 768*480.
Второе изображение для уменьшения времени загрузки страницы на маленьких разрешениях экрана, и для этого мы будем использовать медиа запрос, чтобы получить уменьшенную версию фоновой картинки, хотя всё прекрасно работает и без этого.
Чтобы отредактировать фоновые картинки и уменьшить их вес, не буду учить, наверняка у всех есть закладки с такими сервис или умеете работать с фотошоп.

Ну и сам код, исходник скачал с иностранного сайта, но не трудно разобраться хоть комментарии на английском языке, не стал их стирать чтобы понятнее было:
CSS:

200?"200px":""+(this.scrollHeight+5)+"px");">
body {
/* Location of the image */
background-image: url(images/background-photo.jpg);

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn"t repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn"t move when
the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its container"s size */
background-size: cover;

/* Pick a solid background color that will be displayed while the background image is loading */
background-color:#464646;

/* SHORTHAND CSS NOTATION
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/background-photo-mobile-devices.jpg);
}
}

Ответ от Joomla CMS [гуру]
background-size:100%;
ссылка

Ответ от Cat Butcher (Безумие) [активный]
Ну, что я могу сказать
Первое, это тебе надо картинку адаптировать на разные разрешения, где и как она будет обрезаться (если будет)
Второе, это задать через @media замену фона
(@media почитай на htmlbooks)

Ответ от Влад Соколов [новичек]
ну я в таком случае предлагаю следующее:
если вы выносите таблицу стилей css в отдельный файл (а я рекомендую для удобства так и делать), то вам стоит прописать в ней параметры тега body примерно так:
body {
background-image: url(Background.jpg);
background-attachment: fixed;
background-size: cover;
}
ну и разумеется остальные параметры этого тега по желанию. Так ваша картинка автоматически будет масштабироваться, заполняя весь экран, не будет "пазловой картинки". У этого метода есть одна особенность (некоторые считают плюсом, некоторые минусом) - строчка background-attachment: fixed; фиксирует картинку, иными словами делает так, чтобы бри прокрутке страницы фоновая картинка не прокручивалась, а оставалась на месте.

Адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута 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%; }

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

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

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

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

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