Parallax makes a background image move a little more slowly than the page while the visitor scrolls, which gives the container a sense of depth. It is an optional effect for containers that have an image as Background media.

Before you start

• The container must have a Background media of type Image. Parallax is not available for video backgrounds or for a plain background color.
• The Background Media Parallax group (inside the Background group) only shows up once an image is selected. If you have just added the image and do not see the group, save the page and open the component again.
• Give the container generous top and bottom padding (64px or more). The effect is invisible on a short container because there is not enough distance to scroll through.

The fields

Field	Default	Meaning
Enable parallax	off	Turns the effect on. The other three fields appear only when it is on.
Parallax orientation	Up	The direction the image drifts as the visitor scrolls down: Up (the classic effect), Down, Left or Right. Left and right give a subtle sideways slide.
Parallax scale	1.4	How much the image is enlarged so that it has room to move without showing empty edges. 1.0 means no enlargement (and almost no visible movement); 1.4 enlarges it by 40%; higher values move more but crop more of the picture. Stay between 1.2 and 1.8.
Parallax delay	1	How smoothly the image follows the scroll, in seconds. 0 makes it follow instantly; 1 adds a gentle easing; 2 or more feels floaty. Decimals are allowed (0.6).

How it behaves

• The image is enlarged by the scale factor and shifted as the container moves through the viewport. When the container is in the middle of the screen the image is centered; at the top or bottom of the screen it is offset in the chosen orientation.
• Because of the enlargement, the visible part of the picture is smaller than with a static background. Choose photos whose subject is near the center and avoid images that contain text.
• Background blur and Text color work together with parallax. Background opacity does not affect the image.
• If the visitor’s browser cannot run the effect, the image is shown as a normal static background — nothing breaks.
• Parallax is decorative. Do not rely on it to convey information, and avoid stacking several parallax containers on one page; one hero at the top is usually enough.

Recipe: hero with parallax

Setting	Value
Component	Links (two or three buttons) or Feature Box
Show Section Title	Yes, with a short Intro Text
Padding	120px top, 120px bottom, 32px left and right
Background media	A wide landscape photo (at least 1920 pixels wide)
Text color	#FFFFFF, Include items
Enable parallax	on; orientation Up; scale 1.4; delay 1
Target Placement	Main Content Top or Top region, to place it above the title