Для создания адаптивного фона сайта, который будет корректно отображаться на разных устройствах, можно использовать медиазапросы. 1

Порядок действий: 1

1. Создать контейнер, к которому будет присваиваться картинка. 1 Например, с именем id = «fon_img». 1
2. В стилях присвоить контейнеру фоновое изображение с заданной высотой. 1 Также выставить свойство background-size: cover;, чтобы картинка растягивалась на всю ширину экрана. 1
3. Задать префиксы для других браузеров: -webkit-background-size: cover; -moz-background-size: cover;, -o-background-size: cover;. 1
4. Добавить медиазапросы, с помощью которых будет изменяться высота фоновой картинки для разных устройств. 1

Некоторые стандартные разрешения для адаптивной вёрстки (в пикселях): 3

• 1 600 — для десктопа и телевизора; 3
• 960 — для планшетов; 3
• 375 — для смартфонов. 3

Также для создания адаптивных веб-страниц можно использовать специальные конструкторы, например «Тильда». 2