По умолчанию браузер не меняет размеры фонового изображения. Как быть, если нужно задать фону другие ширину и высоту или привязать его размеры к размерам родительского блока?

Для этого существует свойство background-size. Оно принимает в качестве значения два аргумента: первый — это ширина фонового изображения, второй — его высота. Второй аргумент необязательный. Если высота не указывается, то она определяется автоматически в зависимости от ширины и исходных пропорций. По умолчанию оба аргумента равны auto.

Пример:

background-size: auto auto;   /* исходные ширина и высота изображения */
background-size: 100px;       /* ширина 100px, высота пропорциональная */
background-size: 100px 200px; /* ширина 100px, высота 200px */

Давайте проверим, как работает это свойство на практике.