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.
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 save yearly expense up to $219? why not?

Leave a Comment