---
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-03-31
author: "Aditya Sharma"
description: "Are you looking to add image scroll animation to a container in WordPress? Image scroll animation, where images move or change as the user scrolls through the page. This not..."
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: 391
---

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

Are you looking to add image scroll animation to a container in WordPress? Image scroll animation, where images move or change as the user scrolls through the page. This not only adds a touch of uniqueness to your design, but it also creates a dynamic and interactive user experience.

With the Container block from the Nexter Blocks, you can easily add an image scroll animation 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 **Modern Image Effect** 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.

You can manage the image position from the **Left (Auto %)**, **Right (Auto %)**, **Top (Auto %)** and **Bottom (Auto %)** toggle for desktop, tablet and mobile separately.

You can also manage the image width from the **Width** section for desktop, tablet and mobile separately. 

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

You can add a move effect to the image once you hover over the container by setting a value in the **Effect Intensity** field. The higher the value lower the intensity. A negative value will move the image in the cursor direction while a positive value will move it in the opposite direction.

You can add different effects to the image from the **Effects** dropdown.

5. Then enable the **Magic Scroll** toggle. 

Now you’ll see the same [magic scroll options available with the 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 as per your requirements.

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.

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

Now you’ll see a beautiful image scrolling effect in the section as you scroll the page.