Респонсивні фонові зображення

Респонсивні фонові зображення створюють за допомогою CSS та медіа-запитів.

Спочатку для елемента потрібно встановити базові властивості для фонового зображення - розмір і посилання на зображення.

.box {
  width: 100px;
  height: 200px;
  background-image: url('image.png');
  background-size: 100px 200px;
}

Якщо у елемента немає фіксованих розмірів, то можна задати властивість cover.

.box {
  background-image: url('image.png');
  background-size: cover;
}

Утім в такому випадку навіть на Retina дисплеях буде відображатися звичайне фонове зображення. Для того, щоб підʼєднати зображення підвищеної щільності пікселів використовують медіа-запити. Якщо на пристрої екран підвищеної щільності, то стиль (посилання на зображення) перевизначиться.

.box {
  background-image: url('image.png');
  background-size: cover;
  
  @media (min-device-pixel-ratio: 2),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx) {
    background-image: url('[e-mail]');
  }
}

min-device-pixel-ratio - Медіа-функція у якій вказують цільність екрану (коефіцієнт між CSS-пікселями та фізичними пікселями).

min-resolution - Медіа-функція у якій вказують параметри щодо кількості точок на дюйм. Цю медіа-функцію потрібно вказати з двома значеннями:

• dpi (dots per inch) - кількість фізичних пікселів на дюйм екрана. На екранах стандартної щільності пікселів в одному дюймі 96 точок. На екранах з подвійною щільністю пікселів dpi - 192 і тд.

• dppx (dots per pixel) - кількість фізичних пікселів в одному CSS-пікселі. Тобто - це щільність пікселів (не по загальній кількості, а по горизонталі та по вертикалі). 1dppx = 96dpi.

З кожної вищеописаної медіа-функції зрозуміло, про яку щільність пікселів йдеться. То чому тоді описують всі три? Справа в тім, що ці медіа-функції ще не стандартизовані між різними браузерами, тому доводиться описувати кожну.

Крім того, не всі браузери підтримують медіа-функцію min-device-pixel-ratio і тому треба передбачити й вендорні префікси (автопрефікси).

.box {
  background-image: url('image.png');
  background-size: cover;
  
  @media (min-device-pixel-ratio: 2),
  (-webkit-min-device-pixel-ratio: 2),
  (-o-min-device-pixel-ratio: 2/1),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx) {
    background-image: url('[e-mail]');
  }
}

Якщо завантажити цю сторінку на пристрої з Retina-дисплеєм і відкрити інструменти розробника на вкладинці Network, ми побачимо, що завантажилося зображення підвищеної щільності пікселів.

Тепер зайдемо у вкладинку Elements і виділимо наш блок. Переконаємося, що спочатку браузер знайшов зображення для стандартних екранів, потім перевірив медіазапит, що екран з підвищеною щільністю пікселів і тільки після цього почав вантажити відповідне зображення.