---
title: "How to Change the Background Colour on Scroll in Elementor Horizontal Page Scroll?"
url: https://theplusaddons.com/docs/change-background-colour-on-horizontal-page-scroll-in-elementor/
date: 2023-03-17
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Changing the background colour as each slide comes into view is an easy way to give a horizontal scroll section some rhythm. The Horizontal Scroll widget from The Plus Addons..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-Change-the-Background-Colour-on-Scroll-in-Elementor-Horizontal-Page-Scroll_-1024x536.jpg
word_count: 612
---

# How to Change the Background Colour on Scroll in Elementor Horizontal Page Scroll?

## 

- Horizontal Scroll de The Plus Addons for Elementor usa Background Transition para colocar un color detrás de toda la franja y cambiarlo cuando cambia la diapositiva activa.
- The Plus Addons for Elementor Pro requiere que Horizontal Scroll esté instalado y activado; con el plugin Pro desactivado, el widget no aparece en el editor y la página no muestra nada donde estaba.
- Background Transition asigna las filas por posición, así que la fila 1 corresponde a la diapositiva 1, la fila 2 a la diapositiva 2, y cada fila puede tener un Color, una Choose Image y un Backdrop Filter.
- Background Transition Duration controla el fundido entre colores en segundos, con un valor predeterminado de 0.7 y un límite de 2 segundos; a 0 el cambio es instantáneo.

Changing the background colour as each slide comes into view is an easy way to give a horizontal scroll section some rhythm.

The **Horizontal Scroll** widget from The Plus Addons for Elementor does this with **Background Transition**, which draws a colour behind the whole strip and swaps it as the active slide changes.

*To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, [click here](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/).*

***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/horizontal-scroll/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Horizontal Scroll is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Horizontal Scroll, switched on under **The Plus Addons > Widgets**.- **You need a template:** an Elementor Library template whose top-level sections are the slides. The widget turns each top-level section of that template into one horizontal slide.- **Leave the template sections transparent:** the transition colour is drawn *behind* your template, so a section with its own background will hide it.

## How to Change the Background Colour on Scroll

- Select the **Horizontal Scroll** widget and open **Scrolling Options**.- Switch **Background Transition** on. A **Background** repeater appears with two rows, **Item #1** and **Item #2**.- Open **Item #1** and pick a colour in **Color**. That is the background for the first slide.- Repeat for the other rows, and use **+ ADD ITEM** until you have one row per slide.

![Item 1 of the Background repeater open, with the Color field selected, in the Horizontal Scroll widget](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-bg-color.webp)

- Set **Background Transition Duration** to control how long one colour takes to fade into the next.

![Background Transition Duration slider under the Background repeater, set to 0.7 seconds](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-bg-duration.webp)

## The Result

Each slide now arrives on its own colour. Here slide 2 is in view and the second row's colour is behind it:

![Horizontal scroll slide 2 shown over the blue background colour set for the second Background row](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-result-bg-color.webp)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Background Transition** | Switches the whole feature on. | Off |
| **Background** | One row per slide. Each row has a **Title**, a **Color**, a **Choose Image** and a **Backdrop Filter** popover. | Two rows: Item #1, Item #2 |
| **Background Transition Duration** | How long the fade from one background to the next takes, in seconds. | 0.7 |

## How It Behaves

- The rows are matched to the slides by position: row 1 goes with slide 1, row 2 with slide 2, and so on.- Exactly one row is active at a time, and it follows the slide that is in view.- If you have fewer rows than slides, the slides past the last row have no background of their own.- It still tracks the right slide when the slides have different widths through **Slides Width**.- A slide hidden on the current device is dropped from the strip, and its background row is dropped with it.

## Limitations

- A row can hold a colour and an image. Set only one of the two, or the image covers the colour.- The colour sits behind your template, so any background you set on the template's own sections hides it.- **Background Transition Duration** stops at 2 seconds.- There is no per-slide control over the fade — one duration applies to all of them.- The widget is Pro only, so with the Pro plugin off the whole section, backgrounds included, renders nothing.

## Troubleshooting

### The colours never show

The sections inside your template almost certainly have their own background. Clear it, and the transition colour behind them becomes visible.

### The last slides have no colour

Add more rows with **+ ADD ITEM** until the number of rows matches the number of top-level sections in your template.

### The colour snaps instead of fading

Raise **Background Transition Duration**. At 0 the change is instant.

## Related Docs

- [Horizontal Scroll widget settings overview](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/)- [Change the background image on scroll](https://theplusaddons.com/docs/change-background-image-on-horizontal-page-scroll-in-elementor/)- [Add a page transition effect in horizontal scroll](https://theplusaddons.com/docs/add-page-transition-effect-in-elementor-horizontal-scroll/)

## Frequently Asked Questions

**Q: Why don’t the background colours show on my horizontal scroll slides?**
A: The usual cause is that the sections inside the Elementor Library template already have their own background. The Horizontal Scroll widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH draws the transition colour behind the template, so any section background will cover it. Clearing the section backgrounds lets the colour layer become visible again.

**Q: How many background colour rows do I need for horizontal page scroll in Elementor?**
A: Use one background row per slide, matched by position. Row 1 goes with slide 1, row 2 with slide 2, and so on. If you add fewer rows than slides, the slides past the last row have no background of their own. That makes row count a real setup detail, not just a styling preference.

**Q: What is the best way to make the background colour fade smoothly instead of snapping?**
A: Background Transition Duration controls that fade, and it applies to every slide. A higher value gives you a slower blend between colours, while 0 makes the change instant. The page also notes that this duration stops at 2 seconds, so there is a hard ceiling on how slow the transition can be.

**Q: Can I use a template with different slide widths in horizontal scroll?**
A: The Horizontal Scroll widget still tracks the correct active slide when slide widths differ through Slides Width. That matters because the background rows are matched by position, not by a fixed pixel width. As long as your template’s top-level sections are set up as slides, the active background follows the slide that is actually in view.

**Q: What happens if I turn off The Plus Addons for Elementor Pro?**
A: Horizontal Scroll is Pro only, so switching off The Plus Addons for Elementor Pro removes the widget from the editor and a page that already uses it renders nothing where it was. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this feature only in Pro, so it is not something you can rely on in a disabled state.

**Q: Should I use a colour or an image for each horizontal scroll background?**
A: Each Background row can hold both a colour and an image, but only one should be set at a time because the image covers the colour. For pure colour transitions, leave images out and keep your template sections transparent so the background layer stays visible behind them. If you want to compare related behavior later, there is also a separate doc for [Change the background image on scroll](https://theplusaddons.com/docs/change-background-image-on-horizontal-page-scroll-in-elementor/).