[Full screen vertically scrolling parallax] #css #parallax #scrolling

parallax.html

<!-- https://www.w3schools.com/howto/howto_css_parallax.asp -->
<style>
body, html {
    min-height: 100vh;
}

.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Full height */
    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
} 
</style>

<!-- Container element -->
<div class="parallax"></div>