---
title: "How to Change the Background Image on Scroll in Elementor Horizontal Page Scroll?"
url: https://theplusaddons.com/docs/change-background-image-on-horizontal-page-scroll-in-elementor/
date: 2023-03-17
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A background image that changes with every slide turns a horizontal scroll into something closer to a slideshow, without putting an image inside each section. Background Transition in the Horizontal..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-Change-the-Background-Image-on-Scroll-in-Elementor-Horizontal-Page-Scroll-1024x536.jpg
word_count: 595
---

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

## 

- The Plus Addons for Elementor Horizontal Scroll widget uses Background Transition to assign one image per slide, with optional Background Blur and Background Overlay.
- Horizontal Scroll is Pro only in The Plus Addons for Elementor Pro, and with the Pro plugin switched off the widget does not appear in the editor.
- Rows in the Background repeater match slides by position, so row 3 becomes the background for slide 3 and one row stays active at a time.
- Template sections must stay transparent because the background image is drawn behind the Elementor Library template, and any section background hides the transition layer.

A background image that changes with every slide turns a horizontal scroll into something closer to a slideshow, without putting an image inside each section.

**Background Transition** in the **Horizontal Scroll** widget from The Plus Addons for Elementor takes an image per slide, with an optional blur and colour overlay.

*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 background image is drawn *behind* your template, so a section with its own background hides it.

## How to Change the Background Image on Scroll

- Select the **Horizontal Scroll** widget and open **Scrolling Options**.- Switch **Background Transition** on. The **Background** repeater appears with two rows.- Open **Item #1** and pick a file in **Choose Image**. That image becomes the background for the first slide.- Open the **Backdrop Filter** popover if you want to soften the image: **Background Blur** blurs it and **Background Overlay** lays a colour over it, which is what keeps light text readable.- Repeat for each row, and use **+ ADD ITEM** until there is one row per slide.

![Choose Image field inside Item 1 of the Background repeater in the Horizontal Scroll widget](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-bg-image.webp)

## The Result

Slide 2 in view, on the image and overlay set for the second row:

![Horizontal scroll slide 2 shown over its own background image with a dark overlay](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-result-bg-image.webp)

## Settings in a Row

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Title** | Just the row label in the panel. | Item #1, Item #2 |
| **Color** | A flat colour instead of an image. | Empty |
| **Choose Image** | The background image for this slide. | Empty |
| **Backdrop Filter** | Opens **Background Blur** (0 to 10) and **Background Overlay**. | Default, blur 1 |

## How It Behaves

- Rows are matched to slides by position, so row 3 is the background for slide 3.- One row is active at a time and it follows the slide in view.- **Background Transition Duration** in the same section controls how long one image takes to fade into the next.- The overlay sits above the image, so it tints the picture without touching your slide content.- A slide hidden on the current device is dropped from the strip, and its background row with it.

## Limitations

- Use either **Color** or **Choose Image** in a row. If both are set, the image wins.- There is no crop, focal point or size control for the background image — it fills the area as the stylesheet sets it.- The image sits behind your template, so any background on the template's own sections hides it.- **Background Blur** stops at 10.- The widget is Pro only. With the Pro plugin off, nothing from this widget is rendered.

## Troubleshooting

### The images never appear

Clear the background from the sections inside your template. They are drawn on top of the transition layer.

### The text on the slides is hard to read

Open **Backdrop Filter** and set a semi-transparent **Background Overlay**, or raise **Background Blur**.

### One slide shows a colour where I wanted an image

That row has both a **Color** and a **Choose Image**, or it is missing the image. Check the row that matches the slide's position.

## Related Docs

- [Horizontal Scroll widget settings overview](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/)- [Change the background colour on scroll](https://theplusaddons.com/docs/change-background-colour-on-horizontal-page-scroll-in-elementor/)- [Make a section sticky on scroll](https://theplusaddons.com/docs/make-a-section-sticky-on-scroll-in-elementor-horizontal-page-scroll/)

## Frequently Asked Questions

**Q: What do I need before changing the background image on horizontal page scroll in Elementor?**
A: The Horizontal Scroll widget has to be available in The Plus Addons for Elementor Pro, because the page says the widget is Pro only and disappears from the editor when Pro is switched off. The slides also come from an Elementor Library template, with the top-level sections acting as the horizontal slides. Keep those template sections transparent, since any background on the section itself sits on top of the transition layer and hides the changing image.

**Q: How do I make each horizontal scroll slide use a different background image?**
A: The Background Transition option is what drives the effect. In Scrolling Options, turn it on, then add one repeater row per slide and assign an image in Choose Image for each row. The page notes that rows are matched to slides by position, so row 3 becomes the background for slide 3. That positional mapping matters if you add or remove slides later, because the order has to stay aligned.

**Q: Why are my background images not showing behind the slides?**
A: The most common cause is a section background inside the Elementor Library template. The page says those section backgrounds are drawn on top of the transition layer, so they cover the image change completely. Clearing the background from the sections inside your template lets the Horizontal Scroll widget’s background image sit behind the content again. This is usually faster to fix than changing any scroll setting.

**Q: How do I keep text readable over a changing background image?**
A: Backdrop Filter is there for readability, not just decoration. The page says Background Blur softens the image and Background Overlay lays a colour over it, which helps light text stay readable as each slide changes. A semi-transparent overlay is usually the safer choice when slide text sits directly on top of busy images, because it tints the picture without touching your slide content.

**Q: What happens if I set both a color and an image for one slide background?**
A: The image wins. The Limitations section says each row should use either Color or Choose Image, and if both are set, Choose Image takes priority. That means a row can look wrong if you expected a flat colour but left an old image attached. If one slide shows colour instead of an image, check that row first and confirm it actually has an image assigned.

**Q: Can I control how fast one background image fades into the next?**
A: Background Transition Duration controls that fade between images in The Plus Addons for Elementor Horizontal Scroll widget from POSIMYTH. A longer duration makes the change feel smoother and more slideshow-like, while a shorter one feels snappier as you move through slides. The page also notes that only one row is active at a time and it follows the slide in view, so timing affects how noticeable each transition feels.