Чтобы вписать фоновое изображение полностью при помощи CSS свойства background-image
, вам также следует использовать свойство background-size
. Чтобы заполнить фоновое изображение контейнера, нужно задать значение cover
. Это значение автоматически увеличивает или уменьшает размер фотографии, чтобы она заполнила всю область заданного контейнера без искажения пропорций. Следует помнить, что фоновое изображение может быть несколько растянуто или сжато, чтобы оно было приблизительно равно по размеру контейнеру.
background-image: url("image.jpg");
background-size: cover;
Этот код задает изображение, находящееся в файле «image.jpg», в качестве фона элемента, к которому он применяется, и устанавливает свойство background-size
в cover
. Как следствие, картинка будет заполнена на всю ширину и высоту контейнера, даже если это приведет к искажению пропорций изображения.