Адаптация фона сайта с использованием CSS

 

 

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

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

Для начала понадобятся два изображения-фона.

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

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

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

Ну и сам код CSS:

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;

}

/* For mobile devices */

@media only screen and (max-width: 767px) {

  body {

  background-image: url(images/background-photo-mobile-devices.jpg);

  }

}

 

Способы придания адаптивности изображениям на сайте.

 /* 1 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */
    img {
      display: inline-block;
      height: auto;
      max-width: 100%;
    }
    /* 2 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */
    img {
      display: block;
      height: auto;
      max-width: 100%;
    }
    /* 3 Способ - Придать адаптивность всем изображениям, расположенных в элементе с id="main". При этом данные изображения будут себя ввести как блочные элементы (block) */
    #main img {
      display: block;
      height: auto;
      max-width: 100%;
    }