How to make the background the height of the screen with scrolling?

Question

HTML

Hello. I saw such a feature on some sites: when we go to the site, we have a background image according to the size of the browser. But if you start scrolling, then the image remains in its place and another one or just filling begins. Unfortunately, I can’t recall examples of such sites from memory, since when I found them, there was no such task.
Thank you.

Answer 1

CSS property background-attachment: fixed; will make the background image not movable when scrolling, but stretch the background image background-size: contain;

Answer 2

parallax

Answer 3

Well, you were rightly told that this is Parallax, it's just that it can be presented in any form. Your task is something like this:

.layer-1 {
     background: url(img/img.jpg) center center no-repeat; /*задаем картинку фона по центру и не повторяем её*/
    background-size: 100%; /*Растягивает бэкграунд на всю площадь экрана, можно ещё применить св-во cover, но не забудь расставить префиксы*/
     background-attachment: fixed; /*фиксируем бэкграунд при прокрутке*/
     z-index: -1; /*говорим, что он будет невидим под другими слоями*/
}

.layer-2 /*Наезжающий слой снизу*/ {
     background: url(img/img.jpg) center center no-repeat;
     background-size: 100%;
}

Accordingly, the 2 divs that have these backgrounds should have width: 100%; height: 100%; - for more prettiness)
And if you want to use true parallax with different background movement, etc., then google the parallax.js resource