Чтобы растянуть фон в CSS, можно использовать свойство «background-size».
Пример:
body {
background-image: url('my-background-image.png');
background-size: cover;
}
Здесь мы устанавливаем фоновое изображение с помощью свойства «background-image», и затем устанавливаем «background-size» со значением «cover», чтобы растянуть изображение на всю ширину и высоту родительского элемента, путем масштабирования его до тех пор, пока он не полностью заполнит пространство.
Вы также можете использовать свойство «background-size» со значением «contain», чтобы масштабировать изображение так, чтобы оно помещалось в родительский элемент, но не выходило за его границы, сохраняя при этом свои пропорции:
body {
background-image: url('my-background-image.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Здесь мы также добавляем свойство «background-repeat» со значением «no-repeat», чтобы изображение не повторялось, и свойство «background-position» со значением «center», чтобы установить его в центре родительского элемента, если изображение имеет более широкую или высокую пропорцию, чем родительский элемент.
Обратите внимание, что использование больших фоновых изображений может снизить производительность сайта, особенно на мобильных устройствах или на медленных соединениях, поэтому убедитесь, что вы оптимизировали свои изображения и используете подходящие размеры для разных устройств и экранов.