The parallax effect moves a container’s background image at a different speed than the foreground content as visitors scroll, creating an illusion of depth.
What It Does
The Container block’s Scroll Parallax toggle, applied to a Creative Image background, moves the background image at a different rate than the page scroll so it appears to shift behind the foreground content.
Why It Matters
A static background image scrolls at the exact same speed as everything else on the page, which reads as flat. Parallax motion is one of the simplest ways to add a sense of layered depth to a hero or feature section without introducing an actual 3D asset or extra JavaScript library.
What You Get
A Scroll Parallax toggle for scroll-driven movement, plus two hover-triggered alternatives under Special Image Hover Effects (Parallax Tilt Effect and Parallax Move Effect) for interaction-driven depth instead of scroll-driven depth.
Benefits
- Works directly on an existing Creative Image background, so no separate parallax plugin or custom script is needed.
- Offers both a scroll-based option (Scroll Parallax) and hover-based options (Tilt/Move), covering static-page and interactive-card use cases with the same background settings.
- Uses the container’s own Min Height setting to control how much room the parallax motion has to play out.
Capabilities
- Scroll Parallax – moves the Creative Image background at a different rate than the page as the visitor scrolls.
- Parallax Tilt Effect – a Special Image Hover Effect that tilts the background image on mouse hover.
- Parallax Move Effect – a Special Image Hover Effect that shifts the background image’s position on mouse hover.
- Min Height (Height dropdown) – sets the container’s height so the scroll-driven parallax has enough vertical travel to be visible.
How It Works
Scroll Parallax ties the background image’s vertical offset to the page’s scroll position at a ratio different from 1:1, so the image appears to lag or lead the foreground content. This only reads clearly when the container has real vertical space to scroll through, which is why a Min Height (rather than a height that hugs the content) is required. The two Special Image Hover Effects (Tilt and Move) instead respond to cursor position on hover and are independent of scroll position entirely.
How to Use It
Add the Container block to the page and follow the steps:
1. After setting the appropriate container width, select Min Height from the Height dropdown and set a min-height. (The Default height option works too if there is enough content in the section to create scroll room.)
Note: The parallax effect will not work with the Fit To Screen height option.
2. Go to Style > Background Deep Layer.
3. Select Creative Image from the Select Background Option dropdown.
4. Add your image from the Background Image section and set the background image options.
5. Select Normal Background Image from the Background Effect dropdown.
Note: The Auto Moving Background Image option automatically moves the background image on its own schedule; it cannot be combined with the scroll parallax effect.
6. Optionally, choose Parallax Tilt Effect or Parallax Move Effect from Special Image Hover Effects to add a hover-driven parallax layer as well.
7. Enable the Scroll Parallax toggle.
Save and scroll the front end to see the background move at its own pace as the page scrolls.
Use Cases
- A tall hero section on a landing page where the background image should feel layered as the visitor scrolls past it
- A storytelling section with several stacked image backgrounds, each moving at its own scroll rate
- A product or portfolio card grid using Parallax Tilt or Move on hover instead of scroll, for a more interactive feel
Limitations
- Scroll Parallax does not work with the Fit To Screen height option; the container needs a real Min Height or Default height with enough content.
- Scroll Parallax cannot be combined with the Auto Moving Background Image effect on the same background.
- Because it is scroll-position driven, Scroll Parallax has no visible effect on a section that never gets enough vertical scroll room to move through (for example a very short container).
Troubleshooting
- No parallax movement is visible when scrolling: check the container’s Height setting first; Fit To Screen is documented as incompatible with Scroll Parallax, so switch to Min Height or Default height.
- The background image barely appears to move at all: a taller Min Height gives the effect more scroll distance to play out over; a very short container will only show a subtle shift.
- Enabling Scroll Parallax seems to conflict with an automatically moving background: confirm Background Effect is set to Normal Background Image rather than Auto Moving Background Image, since the two motion effects are documented as mutually exclusive.
To explore other Container background options, see Particle Effect and Video Background.
