---
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 allows users to add an image scroll animation effect to any section in WordPress.
- Modern Image Effect option enables multiple images to move and animate as visitors scroll, enhancing visual experience.
- Magic Scroll toggle opens additional scrolling settings for customizing the image animation effect.

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.

## Frequently Asked Questions

**Q: What should I do if the image scroll animation effect isn't working?**
A: If the image scroll animation effect isn't working, ensure that the Nexter Blocks plugin is properly installed and activated. The Container block is essential for this feature, so double-check that you are using it correctly. Additionally, verify that the Magic Scroll toggle is enabled in the settings. If issues persist, consider checking for conflicts with other plugins or themes.

**Q: What settings work best for the image scroll animation effect?**
A: For optimal results with the image scroll animation effect, adjust the Effect Intensity field to control how the image moves in relation to the cursor. A higher value results in lower intensity, while a negative value moves the image in the cursor's direction. Experiment with opacity settings to ensure the image complements your design without overpowering other elements.

**Q: Are there any limitations when using the image scroll animation effect?**
A: One limitation to consider is that the image scroll animation effect is dependent on the Nexter Blocks plugin and the Container block. If these are not properly set up, the effect may not function as intended. Additionally, ensure that your images are optimized for performance to avoid slowing down page load times, which could impact user experience.