---
title: "How to Add Image Scroll Animation Effect to a WordPress Container Background?"
url: https://nexterwp.com/docs/add-image-scroll-animation-effect-to-a-wordpress-container-background/
date: 2024-11-28
modified: 2026-05-16
author: "Aditya Sharma"
description: "Are you looking to add an image scroll animation effect to a WordPress container background? The Modern Image Effect option in the Nexter Blocks Container block lets you add multiple..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Image-Scroll-Animation-Effect-to-a-WordPress-Container-Background_-1024x519.jpg
word_count: 399
---

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

## Key Takeaways

- Nexter Blocks Container block adds a Modern Image Effect that lets a section use multiple images that move and animate as visitors scroll the page.
- Background Middle Layer settings include separate desktop, tablet, and mobile controls for Left, Right, Top, Bottom, Width, and Responsive Visibility.
- Magic Scroll toggle enables the scroll animation effect, while Effect Intensity, Effects dropdown, Opacity, and Z-index control hover movement, visual style, transparency, and layering.

Are you looking to add an image scroll animation effect to a WordPress container background? The Modern Image Effect option in the Nexter Blocks Container block lets you add multiple images to a section that move and animate as visitors scroll the page, creating a dynamic and layered visual experience.

With the Container block from Nexter Blocks, you can add an image scroll animation effect to any 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/).*

**Best Used For:**

- Agency and portfolio sites with hero sections that animate on scroll to grab attention

- SaaS landing pages where background image layers shift as visitors scroll through feature sections

- Event or product launch pages that use parallax-style image movement to add visual depth

**Requirement** – This block is a part of Nexter Blocks. Make sure it is installed and activated.

[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 **Modern Image Effect** from the **Select Background Option** dropdown.

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

4. Open one item. In the **Select Image** section, add your image.

Adjust the image position using the **Left (Auto %)**, **Right (Auto %)**, **Top (Auto %)**, and **Bottom (Auto %)** controls. Each control is available for desktop, tablet, and mobile separately.

Set the image width from the **Width** section, with separate controls for desktop, tablet, and mobile.

From the **Opacity** field, adjust the image transparency level.

To add a hover-move effect, set a value in the **Effect Intensity** field. A higher value reduces the intensity. A negative value moves the image in the cursor direction. A positive value moves it in the opposite direction.

From the **Effects** dropdown, apply a visual effect to the image.

5. Enable the **Magic Scroll** toggle. 

This opens the [magic scroll options available with Nexter Blocks](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/#How-to-Add-Magic-Scroll-Effect-to-any-WordPress-Block). Set the scrolling settings to match your requirements.

From the **Responsive Visibility** toggle, hide the image on specific device sizes.

In the **Z-index** field, set a value to layer the image over other page elements.

Repeat the process to configure the second item.

Click the **+ Add Item** button to add more images to the section.

The section now shows the image scroll animation effect as visitors scroll the page.