🤔 Какие бывают значение у background-size?

Свойство CSS background-size определяет размеры фонового изображения элемента. Это свойство позволяет контролировать, как фоновое изображение масштабируется и располагается внутри элемента.

🟠auto
Исходный размер фонового изображения. Это значение по умолчанию.

background-size: auto;  

🟠cover
Масштабирует фоновое изображение так, чтобы оно полностью покрывало контейнер. Изображение будет обрезано, чтобы сохранить свои пропорции.

background-size: cover; 

🟠contain
Масштабирует фоновое изображение так, чтобы оно полностью помещалось внутри контейнера, сохраняя свои пропорции. Изображение будет уменьшено или увеличено, чтобы вписаться в контейнер без обрезки.

background-size: contain;   

🟠Ширина и высота в пикселях
Определяет конкретные размеры изображения в пикселях.

background-size: 100px 50px;   

🟠Процентные значения
Определяет размер изображения в процентах от размера контейнера.

background-size: 50% 25%;   

🟠Ширина
Устанавливает ширину изображения, высота будет автоматически установлена для сохранения пропорций.

background-size: 100px;   

🟠Краткий синтаксис
Устанавливает ширину и высоту одновременно.

background-size: width height;   

🚩Примеры использования

Масштабирование изображения с cover

.element {
    background-image: url('example.jpg');
    background-size: cover;
}

Масштабирование изображения с contain

.element {
    background-image: url('example.jpg');
    background-size: contain;
}

Конкретные размеры в пикселях

.element {
    background-image: url('example.jpg');
    background-size: 100px 50px;
}

Процентные значения

.element {
    background-image: url('example.jpg');
    background-size: 50% 50%;
}

Одно значение (ширина)

.element {
    background-image: url('example.jpg');
    background-size: 100px;
}

Ставь 👍 и забирай 📚 Базу знаний