Parallax Image
Component
Intro
Parallax Image brings your background images to life with smooth scroll-driven motion. Set the speed, choose an overlay style, add content on top, and watch a static section become something your visitors actually notice.
Four overlay styles, solid color, gradient, shading, and image, each with independent opacity control. Combine an overlay image with blend modes to create visual effects that go far beyond a simple background.
DropZone
Place any Elements component directly over the parallax image: text, buttons, cards, or entire layouts. The content area centers automatically and adapts to whatever you drop in.
✓ Disabled by default — enable it when you need content over the image
✓ Set the minimum height in the Parallax panel before adding content
✓ Set a maximum width to keep content readable on wide screens
✓ Adjust padding independently on all sides to control spacing from the image edges
Image
The image panel is built on the same system used by the native Elements Image component, giving you full flexibility on how you load your background image.
✓ Drag and drop from your project resources, light and dark mode variants supported
✓ Load from an external URL, with separate light and dark mode sources
✓ Connect to a CMS field for dynamic content
The image always fills the component in cover mode, adapting to any width while keeping enough room to move during scroll.
✓ Opacity control to blend the image into the page
✓ Crop position to anchor the most important part of the image in the visible area
ⓘ Fetch Priority — set to High when this component is the first visible element on the page. Use Auto or Low when it appears further down.
ⓘ Lazy Loading — enable only when the component is placed well below the fold. Leave it off for hero sections.
Parallax
The core of the component. This panel controls the minimum height of the section and all scroll behavior.
✓ Height accepts any valid CSS unit: pixels for fixed sizes, vh for screen-relative height. Use auto only when the dropzone is populated with content
✓ Speed controls how fast the image moves relative to the page scroll. Negative values slow the image down, positive values reverse the direction
✓ Easing shapes the acceleration curve of the scroll motion, from linear to smooth sine and ease variations
✓ Bleed manages the extra image area needed to cover the section during movement. Auto mode calculates it automatically based on speed
✓ Mobile parallax is enabled by default and works smoothly on touch devices. Always verify on a real device
ⓘ The slower the scroll speed, the larger the image needs to be. Low speed values extend the image well beyond the visible area to always fill the frame during scroll. Use high-resolution images when setting slow speeds.
Overlay
✓ A second layer placed over the background image, available in four styles.
✓ Colo, a solid fill with opacity control, useful for improving text readability
✓ Gradient, two colors with direction, position and opacity control for smooth transitions
✓ Shading, a single color that fades from transparent, ideal for adding depth to one corner or edge
✓ Image, a second image placed over the background, with position, size, repeat and opacity control
ⓘ All styles support blend modes, which combine the overlay with the background image using the same compositing logic found in professional design tools. The result can range from subtle color shifts to dramatic visual effects.
Box Shadow
✓ Add a box shadow to the outer container to lift the component off the page.
Borders
✓ Full border control using the standard Elements framework: type, color, opacity, width and radius.
Advanced
✓ add custom Tailwind or utility classes for advanced layout control.
Demo file included ready to use styles
The project includes a curated collection of ready-to-use demo layouts, from clean hero sections to complex layered compositions with overlay and content on top. Every example is ready to use, replace the images and the result is yours.
ⓘ Once installed, you’ll find the demo project in the available projects panel when creating a new one.
Made with Elements®