How to have multiple background images which don't go over each other?

Question

I am making a website using HTML and CSS, on that I have been trying to have six background images to show after the other when scrolling through the website. The problem is that they keep going on top of each other and thus not showing. I have tried different background-position options, like absolute and fixed, but these did not solve the problem. The code I had so far:

body {background-image: 
        url(EerstachtergrondIMG.png), 
        url(What%20is%20ARM%20img.png), 
        url(Difference%20IMG.png), 
        url(use%20Cases%20IMG.png), 
        url(advantages%20IMG.png), 
        url(futureIMG.png); 
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
     background-position:
    background-size: 100%; }