Canvas Docs

Parallax Image

Full-width parallax image section with optional overlay and content. It is shown in the block inserter as Canvas Parallax Image and registered as canvas-core/parallax-image.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Parallax Image settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • Parallax ImageDefault0

    Picture that drifts behind the section as a visitor scrolls. Choose a wide one, since it is cropped to the section height.

  • Image Alt TextDefaultEmpty

    Describes the image for screen readers. Leave empty to use the alt text stored on the media item.

  • Overlay ContentDefaultEmpty

    HTML content displayed on top of the parallax image.

  • Wrap Content in a Stacking LayerDefaultOff

    Adds an extra positioned element around the content so it stacks above an overlay. Only needed when an Overlay Color is set.

  • HeightDefault50vh

    How tall the section stands, as a share of the visitor screen. Auto lets the overlay content set the height instead.

    Choices25vh50vh75vh100vh (Full Screen)Auto

  • Parallax RatioDefault2

    Speed multiplier: higher values create more pronounced parallax.

  • DirectionDefaultVertical

    Whether the picture drifts up and down with the scroll, or sideways across the section.

    ChoicesVerticalHorizontal

  • Reverse DirectionDefaultEmpty

    Turns the drift the other way, so the picture travels against the scroll instead of with it.

    ChoicesDefault (empty)Bottom / Right

  • Content AlignmentDefaultCenter

    Where the overlay content sits across the section.

    ChoicesLeftCenterRight

Overlay

  • Overlay ColorDefaultEmpty

    Tint laid over the picture so overlay text stays readable. Leave it empty for no tint at all.

  • Overlay Opacity (%)Default50

    How strong that tint is. Raise it when the picture is busy and the words are hard to read.

    Shown when Overlay Color is set

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.

Was this page helpful?