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