Let's Talk
v
How to Blur a Divi Background Image

How to Blur a Divi Background Image Without Affecting Text or Modules (Parallax Effect Tutorial)

Jul 1, 2025

How to Blur a Divi Background Image Without Affecting Text or Modules (Parallax Effect Tutorial)

Are you looking to create a stunning blurred background effect in Divi Builder without affecting the text, modules, or borders in your section?

Divi’s built-in filter options apply blur to the entire section, including its content, which can be frustrating. But don’t worry—there’s a simple workaround using Divi’s parallax effect and custom CSS! In this tutorial, we’ll walk you through how to blur only the background image of a Divi section while keeping all other elements crisp and clear. Let’s dive in!

Why Blur Only the Background Image?

A blurred background image can add a modern, professional touch to your website, creating a “frosted glass” effect that makes text and modules pop. Whether you’re designing a hero section, a call-to-action area, or a stylish overlay, this technique ensures your content remains sharp while the background takes on a dreamy, blurred aesthetic. Using Divi’s parallax effect, we can isolate the background image and apply the blur effect exclusively to it. Step-by-Step Guide: Blurring the Background Image in Divi with Parallax Follow these easy steps to achieve a blurred background image in a Divi section without blurring the modules, text, or borders.

Step 1: Set Up Your Section with a Background Image.

  • Open the Divi Builder and navigate to the section where you want to apply the blurred background.
  • In the section settings, go to the Content tab > Background > Background Image.
  • Upload or select the image you want to use as the background.
  • Enable the Parallax Effect by setting “Use Parallax Effect” to Yes.
  • Choose CSS as the Parallax Method (this is critical for the CSS to target the background correctly).

Tip: Use a high-resolution image to avoid pixelation or scaling issues when applying the blur effect.

Step 2: Add a Custom CSS Class to the Section

  • In the same section settings, navigate to the Advanced tab > CSS ID & Classes > CSS Class.
  • Add a custom class name, such as pa-background-filter. This class will allow us to target the background image specifically in our CSS.

Note: Choose a unique class name to avoid conflicts with other sections or styles on your site.

Step 3: Apply the Blur Effect with Custom CSS

  • Go to Divi > Theme Options > General > Custom CSS in your WordPress dashboard. Alternatively, you can add the CSS to your child theme’s stylesheet or a CSS plugin.
  • Copy and paste the following CSS

Code: CSS

.pa-background-filter .et_pb_parallax_css {

    background-attachment: inherit !important;

    background-position: 50%;

    filter: blur(10px); /* Adjust the blur intensity as needed */

}

Save your changes.

What Does This CSS Do?

  • .pa-background-filter targets the section with your custom class.
  • .et_pb_parallax_css is Divi’s internal class for CSS parallax backgrounds, isolating the background image.
  • background-attachment: inherit ! important; ensures the parallax effect aligns correctly.
  • background-position: 50%; centres the background image.
  • filter: blur(10px); applies the blur effect to the background image only. Adjust the 10px value to increase or decrease the blur intensity (e.g., 5px for a subtle blur or 20px for a stronger effect).

Step 4: Add Modules

Add text, buttons, or other modules to your section as needed. These will remain unaffected by the blur effect since the CSS targets only the background image.

If you notice any visual issues (e.g., a white blurred border on dark backgrounds), ensure your background image is high-resolution and properly sized. You can also add the following CSS to refine the appearance:

.pa-background-filter .et_pb_parallax_css {

background-size: cover !important;

background-repeat: no-repeat;

}

To enhance readability, consider adding a semi-transparent background to your row or modules (e.g., rgba(255, 255, 255, 0.8)) for a frosted glass effect over the blurred background.

Step 5: Test Your Design Preview

Test Your Design Preview your page to ensure the background image is blurred while the modules, text, and borders remain sharp.

Test across different browsers (Chrome, Safari, Edge) to confirm compatibility. The filter: blur() property is widely supported in modern browsers, but older browsers like Internet Explorer may not render it.

If cross-browser compatibility is a concern, consider using a pre-blurred image as a fallback, though this is less flexible for dynamic adjustments.

Troubleshooting Common Issues White Blurred Border: If you see a white or faded border around the blurred background, it may be due to image scaling or transparency. Use a high-resolution image and ensure background-size: cover; is applied in the CSS.

Modules Appear Blurred: Double-check that your CSS targets only .et_pb_parallax_css and not the entire section. If the issue persists, verify that the parallax effect is enabled and set to CSS.

No Blur Effect: Ensure the custom class is correctly applied to the section and that the CSS is saved in the correct location (Theme Options, child theme, or CSS plugin).

Explore more