Октябрь 29, 2019 Запись была обновлена
Адаптивное фоновое изображение для сайта — делаем фоновое изображение адаптивным
Я уже писал о том, что сейчас распространен такой элемент на сайте, как фоновое изображение. Чаще всего оно встречается продающих страниц, где располагается в шапке. Оно смотрится очень красиво, если, конечно, оно очень качественное и хорошо подходит к тематике сайта. Кстати, бонусом в этой статьей, в ее конце я расскажу где брать качественные изображения совершенно бесплатно и при этом они будут сделаны профессионалами.
Вот что еще есть по поводу адаптивных изображений для сайта:
Если Вы хотите сделать фон действительно неповторимым, тогда рекомендую следующую статью:
Как это выглядит смотрите на реальном примере:
Посмотреть примерСкачать
Ниже Вы можете увидеть как фоновое изображение адаптируется под различные устройства:
Как сделать адаптивное фоновое изображение для сайта?
HTML часть
Для данного примера мы будем задавать фоновое изображение для body, но подобным образом можно сделать для любого блока на странице. Поэтому ничего сверхъестественного в HTML структуре нет:
1 2 3 4 5 6 7 8 9 | <!Doctype html> <html> <head> <title>Заголовок страницы</title> </head> <body> <!-- Здесь размещаете контент --> </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 (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:
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 пикселей, то будем использовать другое изображение. Всё очень просто.
Бонус к статьей «Где брать фоновые изображения?»
Как и обещал в начале статьи даю Вам ссылку на очень качественный сервис, где Вы сможете подобрать фоновое изображение для своей продающей страницы. Он находится ЗДЕСЬ.
Вывод
Данный эффект очень актуален и его использование можно увидеть практически на каждой продающей странице.
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Спасибо Юра за статью. Как раз пригодилась. Сделал себе новый шаблон, резиновый, а вот шапка плохо смотрелась. Хотел к каждому размеру монитора свое изображение ставить. А тут все просто оказывается. Вот медиа все равно нужно на @media (max-width:480px) и @media (max-width:768px). Сегодня специально в кафешке открывал на планшете, там Wi-Fi слабый, картинка долго вырисоввывалась.
Там, кстати, верхнее меню из твоих уроков взято, правда под WP переделано, но и за уроки отдельное спасибо.
Егор, я рад что статья пригодилась! Не понял про верхнее меню.
Оно взято из одного шаблона и доработано под WP, который был предоставлен на одном из занятий по продающим страницам. 😎
Как раз создаю лендинг… Статья в тему)
Юрий, здравствуйте!
Огромное человеческое СПАСИБО за Ваш труд и за эту статью конкретно!!! Я так давно искал — как это можно реализовать… Как же Вы мне помогли!!! Ещё раз Вам огромное спасибо! За статью — оценка 5, плюс репост. Теперь буду Вашим постоянным читателем! ) Ещё раз благодарю!