---
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-04-12
lang: en
author: "Aditya Sharma"
description: "Do you want to change the background image on horizontal scroll in Elementor? Adding a horizontal scrolling effect to your website pages can help your website stand out and look more..."
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: 365
---

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

## 

- Utilizes the Horizontal Scroll widget from The Plus Addons for Elementor to create background image transitions on scroll.
- Requires installation and activation of The Plus Addons for Elementor to access the Horizontal Scroll widget features.
- Enables background image customization through the Scrolling Options tab, allowing users to manage transition speed and add blur or overlay effects.

Do you want to change the background image on horizontal scroll in Elementor? Adding a horizontal scrolling effect to your website pages can help your website stand out and look more engaging. Especially changing the background image on scroll is a technique that makes websites more visually appealing and engaging. It creates an effect that brings an otherwise static section to life.

The Horizontal Scroll widget from The Plus Addons for Elementor, allows you to add beautiful background image transitions on scroll.

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

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-horizontal-scroll?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the widget on the page and your Elementor template in the **Content** tab.

> *Note: For this to work, make sure you don’t use any background colour or images in your Elementor template sections.*

Then, under the **Scrolling Options** tab, go to **Background Transition** and turn on the toggle.

Under the **Background,** each item represents the background of a section of your Elementor template.

Like **Item #1** is the first section’s background of your template.

![horizontal scroll background image](https://theplusaddons.com/wp-content/uploads/2023/03/horizontal-scroll-background-image-1.png)

To add a background image, open the **Item #1** tab, and from the **Choose Image** section, add an image, it will add a background image to the first section of your template.

You can add blur and overlay colour to the image from the **Background Filter**.

> *Note: Make sure not to use background colour and image together.*

Follow the same process to add background images to other items.

Click on the **+Add Item** button, to add more items to match the number of sections in your Elementor template.

From the **Background Transition Duration**, you can manage the transition speed. The higher the number smoother the transition. 

Once you’ve added the images to all the sections when you scroll, it will have a beautiful background image transition effect.

As you can see, this is how you can add a background image change effect in Elementor horizontal scroll.

Also, check [How to Change the Background Colour on Scroll in Elementor Horizontal Page Scroll](https://theplusaddons.com/docs/change-background-colour-on-horizontal-page-scroll-in-elementor/).