---
title: "How to Add Auto Image Scroll Effect to a WordPress Container Background?"
url: https://nexterwp.com/docs/add-auto-image-scroll-effect-to-a-wordpress-container-background/
date: 2024-11-28
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add an auto image scrolling effect to a section in WordPress? Adding an auto image scroll effect to your WordPress container background. This effect allows for..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Auto-Image-Scroll-Effect-to-a-WordPress-Container-Background_-1024x519.jpg
word_count: 311
---

# How to Add Auto Image Scroll Effect to a WordPress Container Background?

## Key Takeaways

- Nexter Blocks Container block adds an auto image scrolling effect to a WordPress section through Style > Background Middle Layer.
- Auto Moving Layer uses an Image List with two items by default, and each item lets the user set Select Image, Background Size, Direction, Opacity, Transition Speed, Responsive Visibility, and Z-index.
- Multiple background images require opacity lower than 1 for the overlapping image, and the + Add Item button adds more images.

Do you want to add an auto image scrolling effect to a section in WordPress? Adding an auto image scroll effect to your WordPress container background. This effect allows for a seamless transition of images, creating a visually stunning and captivating user experience.

With the Container block from the Nexter Blocks, you can easily add an auto image scrolling effect to a section in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Container block,* [click here](https://nexterwp.com/docs/add-a-container-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/)

Add the Container block with the appropriate layout to the page and follow the steps -

1. Go to **Style** > **Background Middle Layer**.

2. Select **Auto Moving Layer** from the **Select Background Option** dropdown.

3. In the **Image List** section, you’ll find two items by default.

4. Open one item, in the **Select Image** section you have to add your image.

From the **Background Size** dropdown, you can set the background size of the image.

5. Then from the **Direction** dropdown, you have to select the image scrolling direction. You can set the scrolling direction to the left, right, top or bottom.

From the **Opacity** field, you can manage the image opacity.

From the **Transition Speed** section, you can manage the animation speed.

From the **Responsive Visibility** toggle, you can hide the image on different devices.

Then in the **Z-index** field, you can add a z-index value to overlap the image over other elements.

You can repeat the process to edit the other item.

> *Note:* *You must set lower than 1 opacity for the overlapping image if you want to add multiple background images.*

You can click on the **+ Add Item** button to add more images.

Now you’ll see an auto image scrolling section.