---
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-09-04
author: "Aditya Sharma"
description: "An auto-scrolling image background cycles multiple images across a container in a continuous scroll, creating a dynamic layered look for hero sections and banners without any custom code. LIVE BLOCK..."
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: 853
---

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

## Key Takeaways

- Container block’s Background Middle Layer includes an Auto Moving Layer option that scrolls one or more images left, right, up, or down as a continuously moving container background.
- Image List starts with two scrolling image items by default and expands with + Add Item, with each layer getting its own Background Size, Direction, Opacity, Transition Speed, Responsive Visibility, and Z-index controls.
- Opacity below 1 is required when stacking overlapping layers, or the layer beneath it is fully hidden; higher Z-index values place one scrolling layer in front of another.
- Responsive Visibility hides heavier layered setups on specific devices, which the post says helps protect mobile load times when multiple continuously scrolling image layers add CSS animation and image weight.

An auto-scrolling image background cycles multiple images across a container in a continuous scroll, creating a dynamic layered look for hero sections and banners without any custom code.

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

## What It Does

The Container block's Background Middle Layer includes an Auto Moving Layer option that scrolls one or more images left, right, up, or down as a continuously moving container background.

## Why It Matters

A single static hero image reads as flat once a visitor has scrolled past it once. A slow, ambient auto-scroll of layered images keeps a section visually engaging on a long page without demanding attention the way a fast animation or autoplay video would.

## What You Get

An Image List where each item is an independently configurable scrolling layer, with its own Background Size, Direction, Opacity, Transition Speed, Responsive Visibility, and Z-index controls, plus an Add Item button for stacking more than the two default layers.

## Benefits

- Each image layer scrolls, sizes, and stacks independently, so multiple images can move at different speeds and directions in the same background.
- Responsive Visibility lets a heavier layered effect be disabled on mobile to protect page load times.
- Z-index control lets one scrolling layer sit in front of or behind another, building real depth instead of a single flat strip.

## Capabilities

- **Auto Moving Layer** – the background option itself, activating scrolling image layers.
- **Image List with + Add Item** – two scrolling image items by default, expandable to more.
- **Background Size** – sets how each image fills the container (Cover fills without gaps regardless of screen size).
- **Direction** – left, right, up, or down per image layer.
- **Opacity** – per-layer transparency, needed below 1 when stacking overlapping layers.
- **Transition Speed** – controls how fast each layer scrolls.
- **Responsive Visibility** – hides a given layer on specific devices.
- **Z-index** – controls stacking order between layers and other container content.

## How It Works

Each item in the Image List renders as its own scrolling layer with independent Direction and Transition Speed values, so two items set to opposite directions (for example left and right) at different speeds create a cross-hatched motion effect rather than a single uniform scroll. Because the layers stack visually, any item meant to sit above another needs an Opacity below 1 so the layer beneath remains visible, and a higher Z-index to render on top.

## How to Use It

Add the Container block to the page and follow the steps below:

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

Opening the Background Middle Layer panel

2. Select **Auto Moving Layer** from the **Select Background Option** dropdown. This activates the scrolling image effect for the container background.

3. In the **Image List** section, two items appear by default. Each item is one scrolling image layer configured independently.

4. Open one item. In **Select Image**, upload or select the image for that scrolling layer.

5. From **Background Size**, set how the image fills the container; use Cover to fill the full area without gaps regardless of screen size.

6. From **Direction**, choose left, right, up, or down for that image's scroll. Use left or right for wide horizontal sections and up or down for tall vertical sections. (To rotate rather than scroll, see [Image Rotating Background](https://nexterwp.com/docs/add-image-rotating-background-to-a-wordpress-container/).)

7. Set **Opacity** below 1 when stacking multiple layers so each remains visible through the one above it.

8. Set **Transition Speed**: a slower speed creates a subtle ambient effect, a faster speed makes the motion more noticeable.

9. Enable **Responsive Visibility** to hide this layer on specific devices, useful for keeping mobile load times low.

10. Set **Z-index** to control this layer's stacking order relative to others.

Repeat for the second image item, and click **+ Add Item** for additional layers.

> *Note: Set the overlapping image's opacity below 1 when adding multiple background images, or the layer beneath it will be fully hidden.*
Multiple image layers auto-scrolling as a container background

## Use Cases

- An agency or portfolio homepage using a full-width hero section with layered, slowly scrolling background images
- A landing page that needs subtle background motion without distracting from the main headline or CTA
- An event or product page cycling through several promotional images as a continuous scrolling strip

## Limitations

- Every stacked layer beyond the first needs its own Opacity and Z-index tuned manually; the block does not auto-arrange overlapping images.
- Multiple continuously scrolling image layers add ongoing CSS animation and image weight to a page, which is why Responsive Visibility exists to disable heavier setups on mobile.
- Direction is a fixed left/right/up/down choice per layer; there is no diagonal or custom-angle scroll direction.

## Troubleshooting

- **Only one image layer is visible even though two or more are configured:** lower the Opacity on the top layer below 1, per the block's own documented note, so the layer underneath is not fully hidden.
- **The scrolling effect feels too heavy or slows down the page on mobile:** enable Responsive Visibility on one or more layers to hide them on smaller devices.
- **Two layers scrolling in different directions overlap in an unexpected stacking order:** adjust each layer's Z-index value so the intended layer renders on top.

## Frequently Asked Questions

**Q: Why is only one scrolling background image showing in my WordPress container?**
A: The top layer is probably fully covering the one underneath. Nexter Blocks uses independent layers in the Image List, and the page note says overlapping images need Opacity below 1 or the lower layer will be hidden. That matters because the effect depends on partial transparency, not just stacking. If you want depth instead of a flat strip, keep the upper layer semi-transparent and give it a higher Z-index.

**Q: How do I keep an auto-scrolling background from slowing down mobile pages?**
A: Responsive Visibility is the built-in way to hide heavier layers on specific devices. That matters because multiple continuously scrolling image layers add ongoing CSS animation and image weight, which is exactly why the page calls out mobile load times. In practice, use it to disable one or more layers on smaller screens when the layered effect is more decorative than essential.

**Q: What kind of background motion works best for a hero section or banner?**
A: Slow, ambient motion works better than fast movement for hero sections and banners. The page explains that a static hero can feel flat after one scroll, while a slow auto-scroll keeps attention without competing with the headline or CTA. In Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter this is handled by Transition Speed per layer, so subtle usually beats flashy.

**Q: Can I make different background images move at different speeds and directions?**
A: Each item in the Image List is its own scrolling layer, so different speeds and directions are part of the design. The page says two items set to opposite directions like left and right at different speeds create a cross-hatched motion effect instead of one uniform scroll. That gives you real depth when you stack layers with separate Transition Speed, Direction, Opacity, and Z-index values.

**Q: What is the difference between auto scrolling and rotating background images?**
A: Auto Moving Layer scrolls images continuously in left, right, up, or down directions. The page points to [Image Rotating Background](https://nexterwp.com/docs/add-image-rotating-background-to-a-wordpress-container/) for rotation instead of scrolling. That distinction matters because scrolling creates motion across the container, while rotation changes how the image behaves visually. If you want directional movement across a section, Auto Moving Layer is the right fit.

**Q: What are the limits of the auto image scroll effect in a WordPress container?**
A: The effect is directional rather than freeform: each layer can move left, right, up, or down only. The page also says overlapping layers have to be tuned manually with Opacity and Z-index because the block does not auto-arrange them. In practice, that means you get control over depth and motion, but not diagonal or custom-angle scrolling.