Чтобы создать адаптивный фон для веб-страницы, можно использовать следующие шаги:

1. Применить внутренний отступ (padding). 1 Так можно уйти от фиксированных размеров: контент можно менять, при этом блок и его фон будут подстраиваться. 1
2. Установить background-repeat в no-repeat. 1 По умолчанию применяется repeat, но с ним фоновая картинка повторяется, пока не заполнит собой блок. 1
3. Задать background-position: center. 14 Это выровняет картинку по центру контейнера (как по вертикали, так и по горизонтали). 1
4. Задать свойству background-size значение cover. 14 Это позволит картинке подстроиться под размеры блока (её ширина или высота будет равняться ширине или высоте блока, а пропорции сохранятся). 1

Также для улучшения скорости загрузки страницы на маленьких экранах можно использовать медиа-запрос для обработки уменьшенной версии фонового изображения. 4