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

## Key Takeaways

- The Horizontal Scroll widget from The Plus Addons for Elementor allows background image transitions on scroll.
- Users can manage the transition speed of background images with the Background Transition Duration setting.
- To add a background image, users must open the Item #1 tab and select an image from the Choose Image section.

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/).

## Frequently Asked Questions

**Q: What should I do if the background image doesn't change on scroll?**
A: If the background image isn't changing as expected, ensure that you have activated the Background Transition toggle under the Scrolling Options tab. Additionally, check that you haven't set any background color or images in your Elementor template sections, as this can interfere with the background image transition. The Plus Addons for Elementor requires a clean template for the effect to work properly.

**Q: Can I use the horizontal scroll feature for a portfolio showcase?**
A: The horizontal scroll feature is ideal for visually engaging layouts, such as portfolio showcases. By changing the background images on scroll, you can create a dynamic presentation of your work. Just remember to add the Horizontal Scroll widget from The Plus Addons for Elementor and ensure your template sections are free of background colors or images for the best effect.

**Q: What is the best transition speed for background image changes?**
A: The transition speed for background image changes can be adjusted using the Background Transition Duration setting. A higher duration results in a smoother transition, which can enhance the visual appeal of your site. Experiment with different speeds to find what works best for your design, but keep in mind that too slow may lose user interest, while too fast may be jarring.

**Q: How do I add multiple background images for different sections?**
A: To add multiple background images, click the +Add Item button under the Background Transition settings. Each item corresponds to a section of your Elementor template. Open the Item tab for each section to upload a unique background image. This allows for a seamless transition effect as users scroll through your content, enhancing engagement.

**Q: What happens if I use background colors along with images?**
A: Using background colors in conjunction with images can disrupt the background transition effect. The Plus Addons for Elementor specifically advises against combining these elements within your template sections. If you want the image transition to work effectively, ensure that no background colors or images are set in your Elementor template sections.

**Q: Does the horizontal scroll feature work on mobile devices?**
A: The horizontal scroll feature is primarily designed for desktop viewing, and its performance on mobile devices may vary. While the effect can still be implemented, it may not provide the same visual impact on smaller screens. Always test your design on multiple devices to ensure a consistent user experience.