How to Add a Parallax Background in Divi Builder

Updated: November 30, 2020

Parallax effect is often used by website owners to make their websites look more appealing. Most WordPress page builder plugins, including Divi Builder, have a default feature to add a parallax effect so that you don’t need to install an extra plugin to add one. In this post, we will show you how to add a parallax background on your WordPress site using Divi Builder.

Divi Builder, as you might have known, is a popular page builder developed by Elegant Themes which you can install on any WordPress theme. It allows you to add a parallax effect to any element. Be it a section, column, or module.

In case you have no idea yet about what the parallax effect is. In the context of web design, the parallax effect refers to a behavior where the background moves at a slower pace than foreground. Here is an example of the parallax effect.

How to Add a Parallax Background in Divi Builder

One thing you need to know before we get started. There are two parallax effect types offered by Divi Builder:

  • True Parallax: Just like the name suggests, this style creates a slightly slower scrolling movement of the background than the other elements on the page as we mentioned above.
  • CSS: This style creates a fix background image in place while the foreground elements scroll normally.

To add a parallax background in Divi Builder, first, edit the element (section, column, or module) you want to add the parallax background to by clicking the gear icon which appears when you hover your mouse over the associated element.

On the appearing settings panel, open the Background block under the Content tab. Click the Image tab and select an image you want to use as the background. Once your image is uploaded, enable the Use Parallax Effect option and then select the style you like on the Parallax Method dropdown. Don’t forget to click the green checklist icon to apply the change.

That’s it. Once you are done editing your page/theme builder template, you can publish/edit your page.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.