Адаптивный фон для сайта на CSS3

Адаптивный фон для сайта. Drogin.ru

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

Как легко создать адаптивный фон?

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

Стоит отметить, что данный вариант является лучшим, на мой взгляд, так как в нём задействован тот самый минимум правил, который необходим для идеального функционирования. В данном примере будет использоваться исключительно всеми любимый HTML5, а также современный и очень способный CSS3 — никаких JS и прочих лишних вещей, которые служили ранее необходимым инструментом.

 

Как создать адаптивный фон

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

ПРИМЕР СКАЧАТЬ

 

Для начала рассмотрим структуру HTML-файла:

6 строка — обязательный мета-тег, который служит адаптивным правилом для устройств Iphone. Если вы знаете недостаточно, советую ознакомиться с этим в статье про медиаклассы.

11 строка и 14 строка — наши css-файлы, которые мы рассмотрим немного ниже.

19-24 строки — достаточно шаблонная структура. С помощью неё мы будем выводить наш заголовок.

Как можно заметить, достаточно всё просто, хотя для тех, кто мало знаком с HTML5 — такого рода верстка будет чужда, но пора привыкать, почему бы не начать сейчас?!  Если появилось желание и интерес — переходите к статье, в которой я описал новые теги и преимущества HTML5.

Следующим этапом будет создание 2 CSS-файлов:

Для начала подключим CSS, который необходим нам для задания правил конкретно к демо-странице. Он носит имя demo.css, который вы можете найти в примере.

В нём нет ничего особенного, думаю всё достаточно понятно и просто. Следующий CSS-файл необходим нам для создания адаптивности нашему фону и он называется style.css:

Строка 2 — задаём большое изображение, необходимое для ПК.

Строка 10-11 — позволяет выставить размер изображения по размеру окна устройства. То есть, изображение будет такого размера, чтобы создать эффект слайдов. У меня реализован такой пример на главной странице, за исключением того, что в моём случае я создал такой эффект для нескольких фонов. Признаться, было сложнее, чем в данном примере, но немного позже я расскажу и об этом.

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

 

Вывод

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

 

 


3+
Подписаться на новости

Отправить ответ

Оставьте первый комментарий!

  Subscribe  
Уведомить о