How to put two background images ontop of one another to make it scrollable in HTML/CSS

Question

I want two background images so when you scroll it changes. So essentially it would go from the picture of Cambridge (CambridgeBackground.png), then the plain white picture (img-1.png)

Here's my code:

CSS:

.HomeSection{
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(CambridgeBackground.jpg);
    height: 100vh;
    max-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.AboutSection{
    background-image: url(img-1.png);
    height: 200vh;
    max-height: 200vh;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
}

HTML:

<!-- Home Page -->
        <header class="HomeSection">
            <div class="wrapper">
                <div class="logo">
                    <img src="logotrans2.png">
                </div>
                <ul class ="nav-area">
                    <li><a href = "#">Home </a></li>
                    <li><a href = "#">About </a></li>
                    <li><a href = "#">Services </a></li>
                    <li><a href = "#">Portfolio </a></li>
                    <li><a href = "#">Contact </a></li>
                </ul>
            </div>
        

            <section class = "Home">
                <div class = "welcome-text">
                <h1>Parry Tutoring Services</h1>
                </div> 
            </section>


<!-- About section  -->
       <header class="AboutSection">
            <section class="About">
                <div class="container">
                    <div class="column-left">
                        <h1 class="text">About</h1>
                        <p class="text">Lorem ipsum dolor sit amet. Et nostrum laboriosam ad facilis quibusdam ut nisi reiciendis est nemo molestiae qui ipsum delectus. Est aperiam explicabo sed quibusdam repellat aut corrupti ducimus vel sunt illum.</h1>
                    </div>
                </div>
            </section>                
        </header> 

I'm new to HTML/CSS so you may have to dumb it down.

Ty for any help given.