---
title: "How to Add Background Image Scrolling Effect in Elementor?"
url: https://theplusaddons.com/docs/add-background-image-scrolling-effect-in-elementor/
date: 2025-01-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-Background-Image-Scrolling-Effect-in-Elementor_-1024x536.jpg
word_count: 540
---

# How to Add Background Image Scrolling Effect in Elementor?

## 

- 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.
- Magic Scroll starts when the top of the container reaches the middle of the screen and runs for the Duration in pixels of scrolling, with 300 as the default and 600 used in the test.
- The Plus Addons for Elementor Pro is required for Row Background, and the widget is enabled under The Plus Addons > Widgets before it is dropped into a container or classic section.

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](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/section-background/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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**.

![The Upload Image field of a Modern Image Effect item with the image placed on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-effect-image.webp)

- 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.

![The Magic Scroll switch with Scroll Options and the Initial and Final tabs of the image item](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-effect-magic-scroll.webp)

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.

![Building a background image scrolling effect in the Row Background widget](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-image-scrolling-1.gif)

## 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.

## Related Docs

- [Row Background widget: settings overview](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/)- [Add a parallax background](https://theplusaddons.com/docs/add-a-parallax-background-in-elementor/)- [Add a moving image background](https://theplusaddons.com/docs/add-a-moving-image-background-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a background image scrolling effect in Elementor?**
A: The Row Background widget has to be available in The Plus Addons for Elementor Pro, and it must be installed and activated. The widget is enabled under The Plus Addons > Widgets, then placed inside the container or classic section that should receive the background. That matters because the widget does not draw anything on its own, it fills the container you drop it into.

**Q: How do I make a background image drift while the page scrolls?**
A: The effect combines a scroll parallax background with extra images that move through Magic Scroll. In the Row Background widget, set Deep Layer to Creative Background Image, choose a Background Image, and turn on Scroll Parallax. Then use Middle Layer with Modern Image Effect for floating images. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this layered setup inside the Elementor editor.

**Q: Why is my background image not moving when I scroll?**
A: That usually happens when the section is too high on the page or the scroll range is too short. The page notes that moving the section further down can help, because Magic Scroll starts when the top of the container reaches the middle of the screen. Raising Duration also helps because the effect then runs over a longer scroll distance.

**Q: How far does Magic Scroll move an image in Elementor?**
A: Magic Scroll moves the image only half the distance you enter, and it moves in the opposite direction. The page gives an example where a Final (Y) of -200 moved the image about 100 px down. That behavior matters when you are tuning motion, because large values do not translate one-to-one on screen.

**Q: What is the best way to combine parallax with floating images in a background?**
A: The cleanest setup is to use Scroll Parallax for the background layer and Modern Image Effect for one or more foreground images. The page’s example places an image on Desktop with Right 5, Top 15, and Width 350, then turns on Magic Scroll and sets Offset and Duration in Scroll Options. That gives you layered motion without needing code.

**Q: Does this scrolling background effect work on mobile?**
A: Responsive visibility can behave unexpectedly here. The page says turning off Mobile did not hide the image on a 390 px screen, while turning off Tablet did hide it at 800 px. That makes device testing important if you are trying to control which layers appear on smaller screens.