How to remove white space under the background of the container?

Try to do the parallax effect in html and css.
If you do have pictures
background-size: cover;
All the rules, except that if you reduce the window width the picture is cropped.
If you put the pictures
background-size: 100%;
background-repeat: no-repeat;

You can see the whole picture regardless of the width, but at the bottom under each picture is a blank white space.
I would like to instead of an empty white space, "were coming" the next picture.

Here is the code:
https://codepen.io/Drovosek/pen/WaOvYX
March 12th 20 at 08:42
1 answer
March 12th 20 at 08:44
On account of the white stripes: it comes from the fact that .slide and stretched the entire width and the entire height of the screen, and it is positioned at latitude (background-size: 100%;). The picture is just not enough height to fill remaining space. You have the right to use background-size: cover. One of the parties in any case to be clipped if you essentially need parallax on the entire window, but you can manage it.

In this example, the picture occupies all the available space, but their proportions are dependent on the height of the screen.

Find more questions by tags ParallaxLayoutHTMLCSS