A background where images drift at their own pace while the page scrolls feels layered and interactive.
The Row Background widget from The Plus Addons for Elementor combines a scroll parallax background image with extra images that move, fade or rotate as the visitor scrolls.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Row Background widget is only available in The Plus Addons for Elementor Pro.
- Widget to enable: Row Background, switched on under The Plus Addons > Widgets.
- Where to put it: drop the widget inside the container (or classic section) that should get the background. It draws nothing of its own; the background fills that container.
There are several ways to build this effect with the widget. This guide combines a parallax background with a floating image that uses Magic Scroll.
Steps
- Add the Row Background widget to the container. In Content > Deep Layer, set Select Option to Creative Background Image, choose a Background Image and turn on Scroll Parallax.
- Open Middle Layer and set Select Option to Modern Image Effect.
- Open the first item and choose your picture in Upload Image.
- Place the image in the Desktop tab, for example Right (Auto / %) on with Right 5, Top (Auto / %) on with Top 15, and Width 350. Pick an Image Effects animation if you like.
- Turn on Magic Scroll. Click the pencil next to Scroll Options to set Offset and Duration, then set the start and end in the Initial and Final tabs.
Use + Add Item to add more images, each with its own position and scrolling.
The recording below shows these steps in the editor, followed by a short demo of the result.
How It Behaves
- Magic Scroll starts when the top of the container reaches the middle of the screen and runs for the Duration in pixels of scrolling (300 by default). Scrolling back up plays it in reverse.
- In our test with Final Position (Y) -200, Opacity 0.3 and Duration 600, the image moved about 100 px down and faded to 30% while the page scrolled 600 px.
- Image Effects (Pulse, Floating, Tossing, Rotating) keep animating on their own, with Duration Time setting the speed (default 2.5 seconds).
Limitations
- Magic Scroll moves the image half the distance you enter and in the opposite direction (a Final (Y) of -200 moved it 100 px down).
- A container at the very top of the page is already past the middle of the screen when the page opens, so its Magic Scroll does not visibly move.
- Transform Origin for the Rotating effect has no effect; the image always rotates around its centre.
- Turning off Mobile in Responsive Visibility did not hide the image on a 390 px screen (turning off Tablet did hide it at 800 px).
Troubleshooting
The image does not move when I scroll
Move the section further down the page, or raise Duration so the effect runs over a longer scroll.
