Add a moving background to a section
Give a Container block a background picture that drifts slower than the page as visitors scroll, set how far it moves, and turn it off on phones.
A moving background makes the picture behind a section drift slower than the page while visitors scroll, which gives a hero or banner some depth. Only the picture moves. The text, buttons and everything else inside the section scroll normally.
Turn it on
- Open a page in the page builder and select a Container block. The effect is available on Containers only; other blocks do not show the control.
- In the Inspector, open the Style tab and the Background section, and choose an image background.
- Under Effect, choose Parallax.
- Use Strength to set how far the picture is allowed to move. The range is 5 to 50 and the default is 20. Higher values move the picture further.
You can see it in the editor too: scroll the canvas and the picture drifts. The picture always fills the section, so no edge or gap shows at any scroll position.
Turn it off on phones
The Background section follows the device you are editing. Switch the editor to the phone view, open the same Container, and set Effect to None. Desktop keeps the moving picture while phones show a plain image. You can also do the reverse and keep it only on phones.
Why not the Fixed attachment?
The Attach option in the same panel has a Fixed choice that looks similar on a desktop browser. It does not work on iPhones and iPads, where the picture simply scrolls with the page, and it breaks inside sections that use motion effects. Parallax is built to behave the same way on every device, so use it instead. If a Container is already set to Fixed, the panel offers a Use parallax instead button.
Hover backgrounds do not show
If the same Container also has a hover background, that hover background is painted underneath the moving picture, so it is not visible while the effect is on. To get a hover change that shows, use the hover state for something else, such as a border, shadow or opacity, or turn the effect off for that Container.
Visitors who prefer reduced motion
If a visitor has asked their device to reduce motion, the picture stays still and centred. Nothing else about the section changes.
To remove the effect, set Effect back to None. The image stays as an ordinary background.