Как сделать background-image адаптивным


как сделать background-image адаптивным
Адаптивное фоновое изображение для сайта

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

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

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

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

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

Отображение сайта на различных устройствах

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

HTML часть

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

HTML КОД

1 2 3 4 5 6 7 8 9 <!Doctype html> <html> <head> <title>Заголовок страницы</title> </head> <body> <!-- Здесь размещаете контент --> </body> </html>

CSS часть

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

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 (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:

1 2 3 4 5 6 7 8 9 / Для мобильных устройств / @media only screen and (max-width: 767px) { body { / Если размер экрана меньше 767px показываем уменьшенное изображение, которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки на мобильных устройствах / background-image: url(../images/background-photo-mobile-devices.jpg); } }

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

Бонус к статьей «Где брать фоновые изображения?»

Как и обещал в начале статьи даю Вам ссылку на очень качественный сервис, где Вы сможете подобрать фоновое изображение для своей продающей страницы. Он находится ЗДЕСЬ.

Вывод

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

Успехов!

С Уважением, Юрий Немец

Адаптивное фоновое изображение для сайта — делаем фоновое изображение адаптивным 5.00/5 (100.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Полностью адаптивный фон с использованием CSS CSS Шаблон для трафарета буквы своими руками


Как сделать background-image адаптивным Как сделать background-image адаптивным Как сделать background-image адаптивным Как сделать background-image адаптивным Как сделать background-image адаптивным Как сделать background-image адаптивным Как сделать background-image адаптивным Как сделать background-image адаптивным

Дата: 31.01.2018, 10:23 / Просмотров: 73183