Как создать адаптивный фон для веб-страницы?

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

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

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