Адаптивне ціле фонове зображення з допомогою CSS

21

Від автора: У цієї навчальної статті ми розглянемо просту техніку створення фонового зображення, яке буде повністю розтягуватися на всю ширину вікна перегляду (viewport) браузера. Для цього нам знадобиться CSS властивість background-size; JavaScript не потрібен.

Адаптивне ціле фонове зображення з допомогою CSSАдаптивне ціле фонове зображення з допомогою CSS

Приклади адаптивних цілих фонових зображень

В даний час досить популярним стало використання в якості фону величезної фотографії, яка займає всю веб-сторінку. Ось приклади кількох сайтів, у яких встановлені адаптивні цілі фонові зображення:

Адаптивне ціле фонове зображення з допомогою CSS

Sailing Collective

Адаптивне ціле фонове зображення з допомогою CSS

Digital Telepathy

Адаптивне ціле фонове зображення з допомогою CSS

Marianne Restaurant

Якщо ви хотіли б досягти подібного результату у вашому веб-проекті, тоді ця стаття – це те, що вам потрібно.

Базові принципи

Ось наш план дій.

Використовуйте властивість background-size, щоб повністю заповнити вікно перегляду

CSS властивість background-size має значення cover. Значення cover повідомляє браузеру про те, що необхідно автоматично і пропорційно масштабувати ширину і висоту фонового зображення, щоб вони завжди були рівні або були більше ширини/висоти вікна перегляду.

Використовуйте медіа-запит для обробки невеликих фонових зображень для мобільних пристроїв

Щоб поліпшити швидкість завантаження сторінки на маленьких екранах, ми будемо використовувати медіа-запит для обробки зменшеної версії нашого фонового зображення. Це необов’язково. Ця техніка буде працювати і без цього. Але чому використання невеликого фонового зображення для мобільних пристроїв є гарною ідеєю?

Зображення, яке я використовував в демо-прикладі, має дозвіл 5500x3600px. Цього дозволу вистачить для більшості широкоформатних комп’ютерних моніторів, наявних в даний час у продажу. Але заради цього доведеться обробляти файл розміром 1.7 MB.

Така величезна додаткове навантаження тільки заради розміщення фонової фотографії в будь-якому випадку не принесе нічого хорошого. І, безумовно, це виключно погано позначиться на з’єднаннях, які використовують мобільний Інтернет. А також такий дозвіл є зайвим для пристроїв з маленьким екраном (детальніше на цьому зупинимось пізніше). Давайте розглянемо весь процес.

HTML

Для розмітки потрібно тільки це:

…Тут розташовується ваш контент…

Ми збираємося призначити фонове зображення для елемента body, щоб зображення завжди повністю займало вікно перегляду браузера.

Тим не менш, ця техніка буде працювати для будь-якого блокового елемента (наприклад, div або form). Якщо ширина і висота вашого блокового елемента є «гумовою», тоді фонове зображення завжди буде масштабуватися таким чином, щоб зайняти весь контейнер.

CSS

Задаємо наступні стилі для елемента body:

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-size: cover;

Ось де починається чари. Ця пара властивість/значення повідомляє браузеру про те, що потрібно масштабувати фонове зображення пропорційно, тобто щоб його ширина і висота дорівнювали або були більше, ніж ширина/висота елемента (в нашому випадку це елемент body).

Однак у цієї пари властивість/значення є одна проблема: якщо фонове зображення менше розмірів елемента body – що відбудеться на екранах з високою роздільною здатністю та/або коли у вас величезну кількість контенту на сторінці – браузер неминуче збільшить масштаб зображення. І, як ми знаємо, коли ми збільшуємо розміри растрового зображення, якість зображення знижується (іншими словами, відбувається пікселізация).

Адаптивне ціле фонове зображення з допомогою CSS

Збільшення розміру зображення відносно вихідних розмірів позначається на якості зображення. Пам’ятайте про це, коли будете вибирати відповідне зображення. У демо-прикладі використовується величезна фотографія розміром 5500x3600px для широкоформатних моніторів, тому потрібно дуже великий екран, щоб сталося спотворення якості. Давайте рухатися далі. Щоб фонове зображення завжди було по центру вікна перегляду, ми пропишемо:

background-position: center center;

Цей запис має фон на координатній осі по центру вікна. Далі нам потрібно визначити, що буде відбуватися, коли висота контенту перевищує видиму висоту вікна перегляду. Коли це відбувається, з’являється смуга прокрутки.

В даному випадку нам необхідно зробити так, щоб фонове зображення залишалося на вихідному місці, навіть коли користувач прокручує сторінку вниз. В даній ситуації зображення або просто закінчитися при прокручуванні, або буде переміщатися по ходу прокручування (що може сильно відволікати користувача). Щоб зафіксувати фон, ми вказуємо для властивості background-attachment значення fixed.

background-attachment: fixed;

У демо-прикладі я додав можливість «довантажити контент», щоб ви могли подивитися, що відбувається при появі смуги прокрутки в браузері, коли для властивості background-attachment значення fixed. Ви також можете завантажити демо-приклад і пограти зі значеннями, що відповідають за розташування елементів (наприклад, background-attachment і background-position), щоб подивитися, як це вплине на прокрутку сторінки і фонове зображення. Інші значення властивостей самі по собі досить зрозумілі.

Скорочений запис CSS

Я докладно розписав фонові властивості, щоб їх було легше пояснити. Рівнозначної буде і скорочений запис:

body {
background: url(background-photo.jpg) center center cover no-repeat fixed;
}

Все, що вам необхідно зробити, це змінити значення url, щоб вказати шлях до вашого фонового зображення.

Додатково: медіа-запит для маленьких екранів

Для маленьких екранів я використовував програму Photoshop, щоб пропорційно зменшити вихідне фонове зображення до розміру 768x505px, а також я скористався сервісом Smush.it для того, щоб ще трохи зменшити розмір. Завдяки цьому розмір файлу зменшився з 1741KB до 114KB. Тобто розмір зображення зменшився на 93%.

Будь ласка, не зрозумійте мене неправильно, 114KB це все ще досить багато для чисто естетичного елемента дизайну. Враховуючи додаткове навантаження в 114KB, я б став використовувати такий файл, тільки якщо б побачив можливість значно поліпшити досвід взаємодії користувача з сайтом (UX), оскільки зараз значна частка Інтернет трафіку припадає на роботу мобільних пристроїв.

Ось медіа-запит:

@media only screen and (max-width: 767px) {
body {
/* Розмір фонового зображення зменшено на 93%, щоб поліпшити швидкість завантаження сторінки на пристроях, що використовують мобільний Інтернет */
background-image: url(images/background-photo-mobile-devices.jpg);
}
}

У медіа-запиту встановлено обмеження по ширині max-width: 767px, яке означає, що якщо вікно перегляду браузера більше 767px, то буде завантажуватися велике фонове зображення.

Недолік використання даного медіа-запиту полягає в тому, що якщо ви зміните ширину вікна браузера, наприклад, з 1200 px до 640px (або навпаки), ви відразу ж побачите момент завантаження маленького чи великого фонового зображення.

Додатково до цього, з-за того, що деякі пристрої з маленьким екраном можуть відображати більшу кількість пікселів – наприклад, iPhone 5 c дисплеєм retina здатний відобразити дозвіл 1136x640px – маленьке фонове зображення буде пикселизовано.

Підбиваючи підсумок

Ви можете подивитися більш актуальну версію вихідного коду з даної навчальної статті на GitHub. Я можу вас попередити тільки про одне: будь ласка, використовуйте дану техніку з обережністю, тому що великі файли можуть серйозно пошкодити UX, особливо якщо кінцевий користувач використовує повільне і ненадійне з’єднання з Інтернет. Це ще одна причина, чому вам слід підібрати відповідний колір фону, щоб користувач зміг прочитати контент, поки фонове зображення завантажується.

Ніколи не буде зайвим оптимізувати ваші зображення для веба перед використанням на реальному проекті, а допомогти у цьому можуть наступні статті:

Guide to Saving Images for the Web

Tools for Optimizing Your Images

A Crash Course Guide on JPEG

Advanced Image Optimization Tricks