How to fit multiple background images to any screen - html

Question

i´m building a website that has different background images as you scroll down.
The problem I am facing is that each background image is not fitting the screen (in terms of the height). My images won't fit the whole screen unless I set them to have 1100px and therefore will not be fitting the 100% of my height, but let's say they will be going down, on those 20% who are going to come as I scroll down.
I would like to have my images fit 100% of the screens height, without being cut
and going bellow the page.
.container {
background-size: 100%;
background-size: cover;
margin-top: 1vh;
}
.parallax {
background: url("quem-somos.png") ;
background-size: cover;
width: 100%;
height: 100%;
}
.parallax2{
background: url("servicos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax3{
background: url("depoimentos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax4{
background: url("comecando.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax5{
background: url("sac.png") no-repeat center;
background-size: cover;
height: 1000px;
background-attachment: scroll;;
width: 100%;
}
.parallax6{
background: url("onde-atuamos.png") no-repeat center;
background-size: cover;
background-attachment: scroll;
height: 1000px;
width: 100%;
}
I have put all of the images inside the container
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>

Answer 1

You can use this to set the div height to the screen height, you have to make sure html and body have a min height of the screen and also set the background-size: cover
Also .image1 .image2 in my case are direct children of the body element in my example
html, body {
margin: 0;
width: 100%;
min-height: 100vh;
}
.image1 {
width: 100%;
height: 100vh;
background-color: red;
}
.image2 {
width: 100%;
height: 100vh;
background-color: blue;
}

Answer 2

You can have the child divs do the heavy lifting by setting heights to 100vh - the margin on top of the container.
https://jsfiddle.net/x2h0mat7/
Here's a working example with the original html:
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>
and the css:
.container {
margin-top: 1vh;
}
.container>div {
min-height: calc(100vh - 1vh);
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
z-index: 2;
display: flex;
overflow: hidden;
background-attachment: scroll;
}
.parallax {
background: url("https://via.placeholder.com/1600x1200/0000FF/");
}
.parallax2 {
background: url("https://via.placeholder.com/1600x1200/990000/") no-repeat center;
}
.parallax3 {
background: url("https://via.placeholder.com/1600x1200/ffee66/") no-repeat center;
}
.parallax4 {
background: url("https://via.placeholder.com/1600x1200/66eeff/") no-repeat center;
}
.parallax5 {
background: url("https://via.placeholder.com/1600x1200/ee66ff/") no-repeat center;
}
.parallax6 {
background: url("https://via.placeholder.com/1600x1200/ffee66/");
}