---
title: "How to Add Parallax Effect to a Container in WordPress?"
url: https://nexterwp.com/docs/add-parallax-effect-to-a-container-in-wordpress/
date: 2024-11-28
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add a parallax effect to a container in WordPress? The parallax effect creates an illusion of depth and immersion by moving background and foreground elements at..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Parallax-Effect-to-a-Container-in-WordPress_-1024x519.jpg
word_count: 316
---

# How to Add Parallax Effect to a Container in WordPress?

## Key Takeaways

- Nexter Blocks Container block adds a parallax effect to a section in WordPress when it is installed and activated.
- Style > Background Deep Layer uses Creative Image, Normal Background Image, and the Scroll Parallax toggle to create the scrolling parallax background effect.
- Special Image Hover Effects offers Parallax Tilt Effect and Parallax Move Effect on mouse hover, while Fit To Screen height and Auto Moving Background Image do not work with parallax.

Do you want to add a parallax effect to a container in WordPress? The parallax effect creates an illusion of depth and immersion by moving background and foreground elements at different speeds. Adding this effect to a container in WordPress can enhance the overall look and feel of a website, making it more engaging and dynamic for visitors.

With the Container block from the Nexter Blocks, you can easily add a parallax 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 to the page and follow the steps -

1. After setting the appropriate container width select **Min Height** from the **Height** dropdown and set a min-height.

You can also use the Default height if you have enough content in the section.

> *Note: The parallax effect will not work with the Fit To Screen height option.*

2. Then go to **Style** > **Background Deep Layer**.

3. Select **Creative Image** from the **Select Background Option** dropdown.

4. Then add our image from the **Background Image** section and do the necessary background image settings.

5. After that select **Normal Background Image** from the **Background Effect** dropdown.

> *Note: The Auto Moving Background Image option will automatically move the background image based on your settings. You can’t use the parallax effect with this option.*

From the **Special Image Hover Effects** dropdown, you can add different parallax effects on mouse hover. Here you’ll find two options - 

- **Parallax Tilt Effect** - To add a parallax tilt effect on mouse hover.

- **Parallax Move Effect** - To add a parallax move effect on mouse hover.

6. Finally enable the **Scroll Parallax** toggle.

Now you’ll see a parallax background effect as you scroll.