Чтобы использовать изображение в CSS в качестве фона элемента можно использовать свойство background-image и задать URL-адрес до изображения в значении свойства. Вот пример:
<div class="background-img"></div>.background-img {
background-image: url('path-to-image.jpg');
background-size: cover;
background-position: center center;
}Здесь url('path-to-image.jpg') — адрес изображения, которое будет использоваться в качестве фона элемента.
background-size: cover;— устанавливает размер изображения в соответствии с размером элемента, на котором оно отображается, с сохранением пропорций, чтобы все пространство элемента было заполнено изображением и не было пустых зон.background-position: center center;— устанавливает позицию изображения в центре элемента.
Также можно использовать сокращенную запись свойства background, в которой можно указать и другие параметры (например, цвет фона) для фона элемента. Вот пример:
.background-img {
background: url('path-to-image.jpg') center center / cover no-repeat #fff;
}Здесь center center / cover no-repeat — эквивалентно background-position: center center; background-size: cover; background-repeat: no-repeat;.
Обратите внимание, что если изображение слишком маленькое по размеру, то на большом экране может возникнуть проблема растяжения изображения, что может привести к пикселяции и потере качества изображения. Чтобы этого избежать, лучше использовать изображения с большим разрешением.
