parallax on whole page possible? or only on a block?

I've asked Gemini and it can do it...

Method 2: The Custom CSS "Global Parallax" (Recommended)
Since you are on Windows, you can easily add a small snippet of CSS to the Site Settings or the Page Settings (under the HTML/CSS tab) to create a true global parallax layer that sits behind everything.

Set all your blocks to No Fill (Transparent).

Go to Page Settings > HTML/CSS > Custom CSS.

Paste the following code:

CSS
/* Create a fixed background layer that moves slightly on scroll /
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%; / Taller than the screen to allow for movement */
background-image: url('YOUR-IMAGE-URL-HERE');
background-size: cover;
background-position: center;
z-index: -1;
will-change: transform;
}
To make it actually "Parallax" (move at a different speed) rather than just "Fixed," you would add a small piece of JavaScript in the HTML/Settings > Google HTML (or Custom HTML) section:

JavaScript

This works!

Hi, Mark

Thank you for reaching out to us.

Thank you for sharing your idea with us. If you have any further questions or run into any issues, we will be happy to help.
...................................................
Sincerely,
Edgar L.
Nicepage Support Team

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

Last edited 2 days ago by Support Team

Better solution here...

PAGE CSS

#parallax-bg-layer {

    /* Technical Setup */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 250vh !important; /* Must be taller than the screen to scroll */
    z-index: -10 !important; /* Puts it behind your blocks */


    /* The Image */
    background-image: url('images/YOURIMAGENAME.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important; /* Crucial: do not set to fixed */


    /* Visibility */
    display: block !important;
    background-color: #222 !important; /* Dark grey fallback if image fails */
}

/* This part makes the "holes" in your blocks so you can see the image */
.u-body, .u-section, .u-sheet, section {

    background-color: transparent !important;
    background-image: none !important;
}


SITE SETTINGS ADDITIONAL HTML

window.addEventListener('load', function() {

    console.log("Parallax Engine: Initializing...");

    function getLayer() {
        let layer = document.getElementById('parallax-bg-layer');
        if (!layer) {
            console.log("Layer missing! Creating now...");
            layer = document.createElement('div');
            layer.id = 'parallax-bg-layer';
            document.body.prepend(layer);
        }
        return layer;
    }

    const bg = getLayer();

    function updateParallax() {
        const scrollVal = window.pageYOffset || document.documentElement.scrollTop;
        const yOffset = -(scrollVal * 0.4); 


        // We use !important in the JS style to beat Nicepage animations
        bg.style.setProperty('transform', `translate3d(0, ${yOffset}px, 0)`, 'important');


        window.requestAnimationFrame(updateParallax);
    }

    window.requestAnimationFrame(updateParallax);
});

Last edited 2 days ago by Support Team

this does away with the jerk when scroll starts...

Sorry for all the messages, but THIS one works best...
Replace your Site Settings > Additional HTML script with this. It is designed to be more aggressive about staying alive and finding the right path.

JavaScript

(function() {


    function startEngine() {
        // 1. Create the layer if it doesn't exist
        let bg = document.getElementById('parallax-bg-layer');
        if (!bg) {
            bg = document.createElement('div');
            bg.id = 'parallax-bg-layer';
            document.body.prepend(bg);
        }


        function sync() {
            const scrollVal = window.pageYOffset || document.documentElement.scrollTop;
            // Speed 0.4. 
            const yOffset = -(scrollVal * 0.4); 
            bg.style.setProperty('transform', `translate3d(0, ${yOffset}px, 0)`, 'important');
        }


        // Run immediately to sync coordinates
        sync();


        // Continuous loop
        function loop() {
            sync();
            window.requestAnimationFrame(loop);
        }
        window.requestAnimationFrame(loop);
    }


    // Fire as soon as possible
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        startEngine();
    } else {
        document.addEventListener('DOMContentLoaded', startEngine);
    }
})();

THEN Paste this into your Page CSS:

#parallax-bg-layer {


    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 300vh !important; /* Extra height to prevent white gaps */
    z-index: -10 !important;



    /* We list BOTH possible paths here to be safe */
    background-image: url('images/websitebackground3.jpg'), url('websitebackground3.jpg') !important;



    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;



    display: block !important;
    will-change: transform !important;
    transition: none !important;
}


/* Force everything to be clear */
.u-body, .u-section, .u-sheet, section {


    background-color: transparent !important;
    background-image: none !important;
}

Last edited 2 days ago by Support Team

Hello Mark,

Thank you for your detailed investigation and for sharing the final solution.

We’re glad to hear that this approach works well and achieves the desired global parallax effect.

At the moment, Nicepage does not provide a native option for a full page-level parallax background (separate from blocks).
Your workaround using custom CSS and JavaScript is a valid solution for this use case.

We appreciate your feedback. It’s valuable and will be considered for future improvements.

If you have any further questions or need assistance, feel free to reach out.
...................................................
Sincerely,
George.
Nicepage Support Team

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