Sky Addons  ·  Elementor Widget
INTRODUCING

Background Parallax

Background parallax for Elementor: section backgrounds move at their own speed as the page scrolls, adding real depth.

PARALLAX

The background moves at its own speed.

Five motion types, eight directions and a speed that runs from −1 to 2 — applied to the container’s own background, image or video, with no extra markup and nothing to position. Scroll on: each stage below is 600px tall so the travel is actually visible.

Scroll, upward

The background outruns the page

Five effects and eight directions, all on the container’s own media rather than a separate widget.

Zoom

It closes in as you pass

Scale rather than travel — the frame stays put and the image grows into it.

Fade

Present, then gone

Opacity alone, with no movement at all. The quietest of the five.

Scroll + Fade, downward

Two at once, running down

Travel and opacity together, with the direction reversed so the image sinks as the page rises.

Zoom + Fade, top right

Diagonal, and dissolving

One of the four diagonal directions, paired with a zoom and a fade.

Video background

The same five effects, on footage

A self-hosted clip instead of a still. Muted, looping, and parallaxed exactly like an image.

Direction

Same effect, opposite directions.

One control separates these two panels. Both run scroll at speed 0.8 — the left travels up, the right travels down, and the divergence is only legible when they sit beside each other.

Direction · up

The frame rises past the copy.

Direction · down

The frame sinks behind it.

Speed

Negative, default, and hard.

The slider runs −1 to 2. Below zero the background drifts against the scroll, 0.6 is the restrained default, and 1.8 is the value you use when the section is the point.

Speed · −0.6

Against the scroll.

Speed · 0.6

The house default.

Speed · 1.8

Twice the page.

Ten stages · one checkbox

No wrapper, no plugin conflict, no CSS.

Background Parallax lives on the container’s own Advanced tab. Every stage on this page is a stock Elementor container with the effect switched on — tablet and mobile each have their own kill switch, and mobile is off by default because momentum scrolling fights it.

FAQ
Frequently asked

Background Parallax

Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.

Still stuck?

Read the documentation for this one, or write to us — a human answers inside a business day.

Where is Background Parallax in the Elementor panel?

On the Style tab of an Elementor Container, immediately after the Background section. Sky Addons for Elementor adds no parallax widget — you open a container you have already built, give it a background image and a height, and switch the effect on there. Widgets and old-style sections do not get it.

How is this different from Element Parallax?

Background Parallax moves the picture behind the content while the container and everything inside it stay exactly where they are. Element Parallax moves the element itself against the page. If you want a photograph sliding behind a headline that holds still, this is the one.

Do I need Elementor Pro for a parallax background?

No. Background Parallax is a Sky Addons Pro module and runs on free Elementor with no other plugin involved. It needs no GSAP either — it is built on jarallax, so a page using only this effect loads one small library and nothing more.

Can I use a YouTube or Vimeo video as the parallax background?

Yes. Set Media to Video and paste a YouTube link, a Vimeo link or a direct .mp4 URL. The container own background image doubles as the poster while the video loads, and the additional video library is only requested when a URL is actually filled in.

What parallax effects can the background do?

Five: Scroll, Zoom, Fade, Scroll plus Fade, and Zoom plus Fade. Scroll drifts the image against the page, Zoom pushes it toward the visitor, Fade takes it to transparent across the scroll range, and the two pairings run both of those at once on the same range.

Can the background move sideways instead of up?

Yes — there are eight directions: up, down, left, right and the four diagonals. Direction applies to the Scroll and Scroll plus Fade effects, since Zoom and Fade have no travel path to point. Up is the default and the one most people mean by parallax.

What does the Speed setting actually control?

How fast the background moves against the page, on a scale from minus 1 to 2 in steps of 0.1, defaulting to 0.5. At 1 the background is pinned to the scroll and looks static; at 0 it does not move at all; below 0 it travels against the scroll direction.

I switched it on and nothing moves. Why?

Two usual causes. The container has no Background Image of its own — the effect picks up the image already set on the container rather than asking for a separate one. Or the container is too short: with almost no height there is no scroll range for the picture to travel across.

Does it run on phones, and for reduce-motion visitors?

Disable on Mobile is switched on by default, because mobile browsers resize the viewport when the address bar hides and that makes scroll-driven motion jump. A matching Disable on Tablet switch is there too. The effect also reads prefers-reduced-motion and stays completely still when the visitor has asked for it.

Does the parallax preview work in the Elementor editor?

Yes. Sky Addons hands the container background image to the edit canvas as well as the front end, so the effect is live while you build rather than only after publishing. That matters here, because Speed and Direction are far easier to judge by scrolling than by reading numbers.