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

## Key Takeaways

- Row Background widget from The Plus Addons for Elementor allows background changes while scrolling.
- Users can select On Scroll Background Animation to change background color or image on scroll.
- The background image change on scroll does not work with the Gradient Like Effect.

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.

## Frequently Asked Questions

**Q: What should I do if the background change on scroll isn't working?**
A: If the background change on scroll isn't functioning correctly, select 'Relative' from the Position dropdown. This adjustment can resolve issues related to positioning that may prevent the background from changing as expected. Additionally, ensure that the section container height is set to the viewport height or larger, as this can impact the visual effect.

**Q: Can I use the Row Background widget for different sections on the same page?**
A: Yes, you can use the Row Background widget from The Plus Addons for Elementor to change backgrounds for multiple sections. Just ensure that the number of repeater items matches the number of section containers on your page. This setup allows for a seamless transition between different backgrounds as users scroll.

**Q: What is the best practice for setting the section container height?**
A: For optimal results when changing backgrounds on scroll, set the section container height to the viewport height or greater. This ensures that the background change effect is noticeable and visually appealing as users navigate through sections. Avoid using any background color or image in the section container to maintain the effect.

**Q: What types of effects can I apply when changing the background on scroll?**
A: When using the Row Background widget, you can choose between two effect types: the Direct Color Change Effect, which provides a fade transition, and the Gradient Like Effect, which applies a gradient transition. However, note that the background image change on scroll will not work with the Gradient Like Effect, so choose your effect based on your design needs.

**Q: How do I add multiple background images for scrolling?**
A: To add multiple background images for the scrolling effect, use the Select Multiple Colors section within the Row Background widget. You can open the repeater items and add different images for each section. Make sure to click the '+ Add Item' button to include more images if needed, allowing for a dynamic background experience as users scroll.

**Q: What happens if I donu2019t set the correct number of repeater items?**
A: If the number of repeater items does not match the number of section containers on the page, the background change effect may not function properly. Each section should correspond to a repeater item to ensure that the correct background is displayed as users scroll through the content. This alignment is crucial for achieving the desired visual effect.