Site Before Night
Website Editor Guide

How to Add Parallax Scrolling to a Website Section

Parallax scrolling adds a sense of depth to a section by keeping its background image visually fixed while the rest of the page moves as a visitor scrolls. You can turn the effect on from the section's Style settings when that section uses a background image.

Before you start: the section must already have a background image. The Parallax Scrolling option cannot be enabled without one.

Turn on parallax scrolling

Open the page you want to update in your website editor, then follow these steps for the section where you want the effect.

  1. Open the section

    Hover over the website section you want to change and select the Edit option that appears.

  2. Choose Style

    In the section editing panel, open the Style tab.

  3. Find Animations

    Scroll through the Style options until you reach the Animations settings.

  4. Enable Parallax Scrolling

    Turn on the Parallax Scrolling toggle for the section.

Editor path: Edit Section → Style → Animations → Parallax Scrolling
Parallax s1 ss1

If Parallax Scrolling is not available

The most important thing to check is the section background. Parallax scrolling works with a background image, so the option will not be usable until an image has been added to that section.

Check for a background image

Make sure the image is being used as the section background. A regular image placed inside the section does not satisfy the background-image requirement for this effect.

Check the section's Style options

Parallax Scrolling is available on most supported section content types. If the setting is available for your section, you will find it in the Animations area of the Style panel.

Still not seeing the option?

If your section has a background image but the Parallax Scrolling setting is not available in your editor, Site Before Night Technical Support can help determine whether the effect is supported for that section.