Search
Close this search box.

How to Add Parallax Background in Gutenberg

Ever wondered how to create that smooth, eye-catching effect where the background image moves at a different speed or slower than the foreground content as you scroll down the page? This is known as parallax scrolling, and it’s a popular web design technique that can add depth and dimension to your website.

While there are many plugins available to achieve this effect in Gutenberg, what if you could do it without any additional plugins?

In this article, we’ll guide you through the steps of adding parallax background animations to your Gutenberg pages and posts, using only the built-in features of the block editor.

Adding a Scrolling Parallax Background to a Gutenberg Page

Step 1: Add the Cover Block

In your WordPress Gutenberg editor, find the Cover block and add it to your desired section.

Next, choose an image you want to use as a background image for the parallax effect by uploading or selecting an existing media from your library.

Step 2: Add the Foreground Content

After the backdrop image is added, the foreground content needs to be added to create the parallax effect.

You can add foreground content according to your preference by using any blocks available on Gutenberg. For this example, we only add text as foreground content.

Step 3: Enable Fixed Background

Next, we will enable the fixed background option, which is a vital part of this tutorial. You can find that option in the Cover block settings (Block -> Media settings).

That’s it. Preview the page to see the result of your parallax background. You can further customize your parallax, by editing and styling the Cover block settings.

You can also modify your parallax page by combining the Cover block with other blocks and contents.

The Bottom Line

This article explains how to achieve a parallax scrolling effect on your Gutenberg pages without relying on plugins. It provides a step-by-step guide:

  • Use the Cover block: Add a Cover block and choose your background image.
  • Add foreground content: Fill the section with content, like text or other blocks.
  • Enable “Fixed Background”: This option is crucial for the parallax effect.

The article concludes by mentioning that you can customize and combine the Cover block with other blocks to create more complex parallax layouts.

However, we have to admit that this method has its drawbacks and limitations. WordPress plugins like Elementor and Divi give you much more flexibility and ease of use when adding parallax pages.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.