Как уменьшить фон в CSS

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

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

Это уменьшит размер фона изображения в элементе .element на 50% от размера его родительского элемента.

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

• contain обеспечивает отображение всего изображения в элементе, при этом сохраняются его пропорции.
• cover позволяет установить размер изображения для заполнения всего элемента, сохраняя его пропорции.

Например:

.element {
    background-image: url(example.jpg);
    background-size: contain; /* для отображения всего изображения в элементе */
    background-size: cover; /* для заполнения всего элемента */
}

Также можно использовать значение auto для одного из параметров background-size, чтобы задать автоматический размер по этому параметру, а вторым параметром задать конкретный размер. Например:

.element {
    background-image: url(example.jpg);
    background-size: auto 50%; /* автоматический размер по ширине, 50% по высоте */
    background-size: 50% auto; /* 50% по ширине, автоматический размер по высоте */
}

Обратите внимание, что свойство background-size может не работать в старых версиях браузеров, поэтому лучше проверить отображение на разных устройствах перед публикацией сайта.