---
title: "How to Add Parallax Effect to a Container in WordPress?"
url: https://qa.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://qa.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 enables the addition of a parallax effect to sections in WordPress.
- Parallax effects include Parallax Tilt Effect and Parallax Move Effect, both activated on mouse hover.
- Scroll Parallax toggle must be enabled to see the parallax background effect while scrolling.

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://qa.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://qa.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.