Parallax

Hero Image PLUS provides an optional scroll-parallax effect for the background image.

The effect moves the background while the content remains stationary.

Enabling Parallax

1. Open Background & Effects.
2. Open the Parallax section.
3. Enable Scroll parallax.
4. Set the movement strength.
5. Optionally enable parallax on mobile devices.
6. Save and publish the page.

Movement Strength

Supported range:

• Minimum: 0 pixels
• Maximum: 500 pixels
• Default: 40 pixels

The configured value is a requested maximum movement.

The actual movement may be lower. Hero Image PLUS calculates the vertical image overflow available with the normal cover rendering and limits movement so the effect does not expose empty areas.

This behavior also avoids the excessive horizontal cropping that can occur when a background layer is artificially enlarged for high parallax values.

Image Dimensions and Visible Movement

Parallax requires vertical image overflow.

The available movement depends on:

• Source image width and height
• Hero width and height
• Background position
• Viewport dimensions
• Desktop or mobile image selection

A wide image used in a relatively tall hero may provide little vertical overflow. In that situation, increasing the setting to 500 pixels cannot create 500 pixels of safe movement without showing empty space or zooming the image.

Use an image with enough height when a strong parallax effect is required.

Mobile Parallax

Mobile parallax is disabled by default.

Enable it only after testing:

• Performance
• Touch scrolling
• Image cropping
• Content readability
• Multiple mobile browser sizes

Reduced Motion

Parallax is automatically disabled when the browser reports:

prefers-reduced-motion: reduce

This visitor preference cannot be overridden by the block setting.