Parallax Scrolling Demo

Scroll down to see the background image stay fixed while content moves over it. This uses Appearance → Background Style: Custom Image + Embedded Motion: Parallax.

Scroll to See Effect

How to test parallax

1. Edit any block → Appearance → Background Style: Custom Image Upload → upload your blue cloud image (≥1920×1080, ≥2000px wide for best parallax).
2. Appearance → Embedded Motion Animation: Parallax Scrolling (Background Fixed)
3. Appearance → Content Placement: try Left (Center Vertically) vs Center vs Right to see whole block shift.
4. Save and view frontend. The background should stay fixed as you scroll.

If you still see no effect, ensure the block has enough height (Padding Top/Bottom → Large/XL) so the parallax area is tall enough to scroll through.

Parallax Section — Content Left

This CTA block has Custom Image background with Parallax enabled and Content Placement: Left. The blue cloud image you uploaded should stay fixed while this text stays left-aligned as you scroll.

Get Started

Scroll past the parallax to see it

Add more content below so you can see the parallax background stay fixed while you scroll.

Feature One

This is filler to make the page scrollable. The parallax section above should have its background fixed.

Feature Two

Keep scrolling — the blue cloud background should not move with the page.

Feature Three

If you see the background moving with the content, parallax is not active. Check Appearance settings.

Parallax Section — Content Right, Bottom

Second parallax demo: Same image, Content Placement: Right and Bottom. Should appear at bottom-right of the section when you scroll into it.

Try Different Placement

Parallax Section — Center

Third demo: Content Placement Center. Background is same blue cloud, fixed. This is the default centered look from your frontend screenshot, now with parallax.