Свойство 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 задает позицию изображения на элементе: в центре по горизонтали и вертикали.
