---
title: "How to Change Background On Scroll in Elementor?"
url: https://theplusaddons.com/docs/change-background-on-scroll-in-elementor/
date: 2025-01-10
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to change the background as you scroll in Elementor? This dynamic effect adds a touch of creativity and interactivity to a website, making it more engaging for..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Change-Background-On-Scroll-in-Elementor_-1024x536.jpg
word_count: 413
---

# How to Change Background On Scroll in Elementor?

## 

- Utilizes the Row Background widget from The Plus Addons for Elementor to implement background changes on scroll.
- Offers two effect types: Direct Color Change Effect for a fade and Gradient Like Effect for a gradient transition.
- Requires equal repeater items to section containers and suggests setting container height to viewport height for optimal results.

Do you want to change the background as you scroll in Elementor? This dynamic effect adds a touch of creativity and interactivity to a website, making it more engaging for visitors.

With the Row Background widget from The Plus Addons for Elementor, you can easily change the background while scrolling in Elementor.

*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, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/row-background/)

To do this, add the Row Background widget to the page and follow the steps -

https://www.youtube.com/watch?v=Xu_H2ONHCDs

1. Select **On Scroll Background Animation** from the **Select Option** dropdown, under the **Deep Layer** tab.

![](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-on-scroll-background-animation.gif)

2. Then from the **Select Multiple Colors** section you can select to change the background color or image on scroll. 

Here we’ll change the background image on scroll.

By default, you’ll find three repeater items, open the first one.

3. In the **Select Image** section you have to add the first background image.

4. Then open the second item and add the second background image in the **Select Image** section.

Similarly, you can add different background images to the other items.

You can click on the **+ Add Item** button to add more background images.

> *Note: To change the background for each section container on scroll, make sure the number of repeater items is equal to the number of section containers on the page.*

> *Note: For the best result set the section container height to viewport height or bigger. Make sure not to use any background color or image in the section container.*

From the **On Scroll Change** dropdown, you can change the effect type. Here you’ll find two options - 

- **Direct Color Change Effect** - To change the background color or image with a fade effect.

- **Gradient Like Effect** - To change the background color with a gradient effect.

> *Note: Background image change on scroll will not work with the Gradient Like Effect.*

If the background change on scroll isn’t working properly you can select **Relative** from the **Position** dropdown to fix the issue.

Then from the **Transition Duration** section, you can set the image transition duration.

For creating a simple background change on scroll you don’t need to add any background in the other layers.

Now you’ll see the viewport background changing as you scroll from one section container to another.