Фоновые изображения не масштабируются автоматически, потому что по умолчанию ширина и высота заданы как auto, что означает сохранение исходных размеров изображения. 3

Чтобы изменить размер фона, можно использовать свойство background-size в CSS. 3 Есть несколько вариантов настройки:

• background-size: auto. 1 Изображение отображается в своём естественном размере. 1
• background-size: cover. 12 Изображение масштабируется так, чтобы полностью заполнить фон элемента, возможно, обрезая его. 1
• background-size: contain. 1 Изображение масштабируется так, чтобы полностью поместиться в фон элемента без искажений. 1

Если фоновое изображение имеет меньшее разрешение, чем размеры элемента, браузер будет растягивать картинку. 2 В таком случае может пострадать качество изображения (появиться пикселизация). 2