Чтобы раздел сайта имел div с фоновым изображением, которое имело и то, background-attachment: fixedи другое background-size: cover, независимо от размера изображения. Этот веб-сайт является рабочим примером нескольких фиксированных полноэкранных разделов фонового изображения.
Код
div {
width: 100%;
height: 90vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
Вы также можете написать этот код в backgroundстенографии:
Код
div {
background: url(file.jpg) no-repeat 50% fixed / cover;
}
Теперь переходим к основе:
Установка:
HTML
Код
<div style="background-image: url(https://placeimg.com/1000/600/arch);"></div>
<div style="background-image: url(https://placeimg.com/1000/600/nature);"></div>
<div style="background-image: url(https://placeimg.com/1000/600/tech);"></div>
CSS
Код
div {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
height: 90vh;
}
Фоновое изображение в HTML только в том случае, если вы извлекаете изображение динамически через PHP. В противном случае вы можете создать отдельные классы с фоновыми изображениями в файле CSS.
Демонстрация
