Multiple backgrounds vertically in HTML CSS?

Question

I wonder how to make a page that has like 2,3 background that stretch 100% horizontally, but vertically touch the end of the previous background?
I tried with DIVs, but they cover the page. I searched for multiple backgrounds but this only supportal horizontally backgroudn to background.

And the thing is -this is very common in sites.

Answer 1

I guess you can treat images as HTML elements(not background) and use position: relative(or absolute);
display: inline-block;
height: ...%;
I think it works...

Answer 2

Use these on body background:

body {
background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg);
background-position: top left, top 33vh left, top 66vh left;
background-repeat: no-repeat;
background-size: 100vw 33vh, 100vw 33vh, 100vw 34vh;
}

https://code.sololearn.com/Waqjhdndo05q/?ref=app

Answer 3

use no-repeat value on the background repeat property