Scroll effect

Hi,

You have invalid CSS. It uses Less syntax, which browsers cannot parse.

Try &: before replace with .background: before and don't nest this rule block in the block .background { .
So your code should be:

<style>
            @import url('https://fonts.googleapis.com/css?family=Montserrat:900');

            .test {    
                margin: 0;
                padding: 0;
                height: 150vh;
                overflow-x: hidden;
                font-family: Montserrat, sans-serif;
            }


            .background {           
                background-image: url(https://intelartifice.fr/test-nice/images/3.jpg);
                background-size: cover;
                background-position: 50% 50%;
                background-clip: text;
                height: 150vh;
                font-weight: bold;
                font-size: 30rem;
                -webkit-text-fill-color: transparent;
                position: relative;
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                overflow: hidden;
            }    


               .background:before {
                    content: '';
                    background-image: inherit;
                    background-size: cover;
                    background-position: 50% 50%;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: -2;
                }
    </style>        

            section class="test">
            <div class="background"><span><br>BeMine</span></div>
            </section>
            <script>
                const scrollY = window.scrollY;


                if(scrollY !== 0) {
                    background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`;
                } else {
                    background.style.backgroundPosition = '';
                }
            });
        </script>

...................................................
Sincerely,
Susanna I.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi,
Many thanks, you're right there is less syntax.
I'll test that !
I've already inserted a section after header out of Nicepage and it's ok.

Jean-Marc