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

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

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

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

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

HTML частина

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

Дякую Юра за статтю. Якраз в нагоді. Зробив собі новий шаблон, гумовий, а ось шапка погано виглядала. Хотів до кожного розміру монітора зображення ставити. А тут все просто виявляється. Ось медіа все одно потрібно на @media (max-width: 480px) і @media (max-width: 768px). Сьогодні спеціально в кафешці відкривав на планшеті, там Wi-Fi слабкий, картинка довго вирісоввивалась.
Там, до речі, верхнє меню з твоїх уроків взято, правда під WP перероблено, але і за уроки окреме спасибі.

Воно взято з одного шаблону і доопрацьовано під WP, який був наданий на одному із занять по продають сторінок. 😎