Адаптивне фонове зображення для сайту - робимо фонове зображення адаптивним

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

Ось що ще є з приводу адаптивних зображень для сайту:

• Слайд-шоу на фоновому зображенні
• Робимо адаптивне зображення на сайті

Якщо Ви хочете зробити фон дійсно неповторним, тоді рекомендую наступну статтю:

• Слайд-шоу на фоновому зображенні

Як це виглядає дивіться на реальному прикладі:

Подивитися прімерСкачать

Нижче Ви можете побачити як фонове зображення адаптується під різні пристрої:

Як зробити адаптивне фонове зображення для сайту?

HTML частина

Для даного прикладу ми будемо задавати фонове зображення для body, але так само можна зробити для будь-якого блоку на сторінці. Тому нічого надприродного в HTML структуру немає:

123456789

lt;htmlgt;lt;headgt;lt;titlegt; Заголовок сторінкиlt;/titlegt;lt;/headgt;lt;bodygt;lt;/bodygt;lt;/htmlgt;

CSS частина

Залишилося тільки поставити в файлі стилів необхідні властивості, щоб зробити задумане - адаптивне фонове зображення для сайту:

1234567891011121314151617181920212223

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 (Медіа запити), які дозволяють задати окремі властивості для довільної ширини екрану:

123456789

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

Що ми зробили? Якщо ширина вікна браузера на пристрої буде менш 767 пікселів, то будемо використовувати інше зображення. Все дуже просто.

Бонус до статті «Де брати фонові зображення?»

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

висновок

Даний ефект дуже актуальний і його використання можна побачити практично на кожній продає сторінці.

Успіхів!

З повагою, Юрій Німець