--- 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-09-14 lang: en author: "Aditya Sharma" description: "Changing the background as visitors scroll gives each part of a long page its own mood. The Row Background widget from The Plus Addons for Elementor places a background behind..." image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Change-Background-On-Scroll-in-Elementor_-1024x536.jpg word_count: 441 --- # How to Change Background On Scroll in Elementor? ## - Row Background widget from The Plus Addons for Elementor places a background behind the whole page and switches it to the next colour or image when the next section reaches the screen. - The Plus Addons for Elementor Pro makes Row Background available, and the widget is enabled under The Plus Addons > Widgets before it is dropped into a container or classic section. - On Scroll Background Animation uses Select Multiple Colors with one item per section, and Direct Color Change Effect with a default Transition Duration of 0.7 seconds; extra sections repeat the first item if the page has more sections than items. Changing the background as visitors scroll gives each part of a long page its own mood. The **Row Background** widget from The Plus Addons for Elementor places a background behind the whole page and switches it to the next colour or image when the next section reaches the screen. *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.- **Page:** several top-level containers, one for each background change. https://www.youtube.com/watch?v=Xu_H2ONHCDs ## Steps - Add the Row Background widget to the first container of the page and open **Content > Deep Layer**.- Set **Select Option** to **On Scroll Background Animation**.- In **Select Multiple Colors**, give each item a **Color** or a **Select Image**. Item 1 is for the first section, item 2 for the second, and so on. ![The Select Multiple Colors list of an On Scroll Background Animation deep layer](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-scroll-items.webp) - Keep **On Scroll Change** on **Direct Color Change Effect** and set the **Transition Duration** (default 0.7 seconds). ![The On Scroll Change dropdown and Transition Duration slider](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-scroll-effect.webp) The recording below shows these steps in the editor, followed by a short demo of the result. ![Setting up an on-scroll background change](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-on-scroll-background-animation.gif) ## How It Behaves - The background is fixed behind the whole page, not only the container that holds the widget.- In our test with three colours and three sections, the background showed colour 1 at the top, changed to colour 2 when the second section came into view and to colour 3 for the third section. Scrolling back up changed it back.- Image items switch in the same way.- If the page has more sections than items, the extra sections showed the first item again rather than continuing the list. ![Published page scrolled to the second section with the red scroll background behind it](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-result-scroll-color.webp) ## Limitations - **Gradient Like Effect** did not blend smoothly in our test: the background started black at the top of the page and jumped between colours while scrolling. Use **Direct Color Change Effect**.- **Gradient Like Effect** ignores image items; with only images the background stayed empty. ## Troubleshooting ### The background does not change Check that the page has several top-level containers and that the widget uses On Scroll Background Animation with Direct Color Change Effect. ### The last sections show the first colour Add one item per section in **Select Multiple Colors**. ## Related Docs - [Row Background widget: settings overview](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/)- [Add an animated gradient background](https://theplusaddons.com/docs/add-an-animated-gradient-background-in-elementor/)- [Change the background with a carousel](https://theplusaddons.com/docs/change-carousel-background-on-slide-change-in-elementor/) ## Frequently Asked Questions **Q: Why does the background only change when the next section reaches the screen?** A: The Row Background widget is built to switch backgrounds by section position, not by a timer or manual click. It sits behind the whole page and changes to the next colour or image when the next section reaches the screen, so each part of a long page gets its own mood. In practice, that means the scroll position controls the effect, and scrolling back up switches it back again. **Q: What do I need before using background change on scroll in Elementor?** A: The setup depends on The Plus Addons for Elementor Pro, because the Row Background widget is only available in the Pro edition. The page also expects several top-level containers, one for each background change, and the widget should be placed inside the container that should get the background. That matters because the widget draws nothing of its own; it fills the container it lives in. **Q: How many sections can use different scroll backgrounds on one page?** A: The page is designed around several top-level containers, with one background change per section. In the example with three colours and three sections, each section mapped to one item in Select Multiple Colors. If there are more sections than items, the extra sections show the first item again instead of continuing down a longer list. **Q: What is the best setting for smooth background changes on scroll?** A: Direct Color Change Effect is the safer choice here. The page says Gradient Like Effect did not blend smoothly in testing, started black at the top of the page, and jumped between colours while scrolling. It also ignores image items, so if your design uses images or you want predictable switching, Direct Color Change Effect is the better fit. **Q: Why does my background not change when I scroll?** A: That usually points to either missing top-level containers or the wrong animation mode. The troubleshooting note says to check that the page has several top-level containers and that the widget uses On Scroll Background Animation with Direct Color Change Effect. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses those settings to drive the scroll-based swap. **Q: Can I use images instead of solid colors for scroll background changes?** A: Image items switch in the same way as colours when using On Scroll Background Animation. Each item in Select Multiple Colors can be set as a Color or a Select Image, so you can build a mixed sequence if needed. One important catch is that Gradient Like Effect ignores image items and stayed empty with only images in testing.