Свойство CSS background-cover устанавливает фоновое изображение на элементе таким образом, чтобы оно полностью покрывало заданный элемент. Если размер изображения не соответствует размеру элемента, оно будет изменено в размере, чтобы полностью заполнить элемент, не нарушая его пропорции. При этом части изображения, выходящие за пределы элемента, будут обрезаны.

Синтаксис:

background-cover: значение;

Значения:

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

Пример использования свойства background-cover:

.element {
  width: 500px;
  height: 300px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center;
}

В этом примере задается элемент с шириной 500 пикселей и высотой 300 пикселей, на котором устанавливается фоновое изображение с помощью свойства background-image. Чтобы изображение полностью покрыло элемент, используется свойство background-size с значением cover. Свойство background-position задает позицию изображения на элементе: в центре по горизонтали и вертикали.