Have questions? I can help!
(And how to troubleshoot them if things look off)
The Background Options let you add fully responsive and customisable backgrounds to any Divi element, including modules, columns, rows, and sections.
The background settings can be applied at different levels of your layout. Sometimes you might see a background colour or image that you didn’t add—or can’t figure out how to remove. That’s usually because can be set on either Section, Row, Column, or Module.
Each of these has its own background settings, and depending on the template you're using, it could be applied at any of these levels.
Accessing Background Options
To access Background Options for any element:
- Open the settings for the element you want to customize.
- Select the Content tab.
- Click Background to view the available options.
Here, you’ll see settings for adding and adjusting color, gradient, image, video backgrounds, patterns, and masks.
Background Options Overview
Each background type in the Background Options Group offers unique styling choices to make your designs stand out:
Background Types Overview
Background Color: Add solid color fills using a color picker. You can adjust opacity, set gradients, or layer colors with images and patterns.
Background Gradient: Create custom gradients by selecting colors and configuring gradient directions, start/end points, and radial or linear styles. Gradients can be used alone or layered with other backgrounds.
Background Image: Upload or select images for your background. You can adjust the position, size, and repeat settings to control how the image appears across devices. Options include fixed or parallax scrolling.
Background Video: Embed video backgrounds by uploading a video file or adding a URL. Video backgrounds work well for capturing attention but are optimized to avoid loading issues on mobile.
Background Pattern: Choose from built-in pattern options to add texture and depth. Patterns can be adjusted for opacity and size to fit your design style and combined with other backgrounds.
Background Mask: Masks add custom shapes and overlays to backgrounds. Choose from a variety of shapes like circles, diagonal lines, and geometric patterns to create focus areas or visually separate sections. Masks are highly customizable with options for color, size, and orientation, making them ideal for layered effects when combined with other backgrounds.
How to Add and Layer Backgrounds
To layer backgrounds, you can combine different options, such as setting a background color and overlaying it with a pattern or gradient. Here’s how to layer backgrounds in Divi 5:
- In the Background Options Group, apply the primary background type first (such as color or image).
- Select a secondary background type (e.g., a gradient or pattern) and adjust its opacity to allow the layers beneath it to show through.
- For more complex effects, experiment with blending modes available for images and patterns, allowing unique color and visual interactions between layers.
Responsive Background Customisation
With Divi 5, you can set unique background styles for each device type - desktop, tablet, and mobile.
This allows you to adapt designs to smaller screens without compromising on style or clarity. Simply select the device icon within each background setting to apply customizations for each screen size.
Tips for Effective Backgrounds
- Use Masks for Visual Focus: Masks are great for drawing attention to specific areas or creating design focal points.
- Optimise Media: Use optimized file sizes for images and videos to maintain quick load times.
- Balance Complexity: Layering is powerful but should be done with balance to avoid overwhelming the design.
Background Options Settings Summary
Option | Description |
Color | Adds a solid color background, customizable for opacity and blending. |
Gradient | Creates gradient backgrounds with color choices and directional controls. |
Image | Sets image backgrounds with size, position, and parallax scrolling options. |
Video | Embeds video as a background, with mobile-friendly optimization. |
Pattern | Adds adjustable patterns for texture and visual interest. |
Mask | Customizes background shapes with mask overlays, including color, size, and orientation. |
Troubleshooting: Can’t Find Where a Background Is Coming From?
If you’re seeing a background colour or image and you don’t know where it’s set, go through these steps:
- Click the Section>Open settings> Check background tab
- Click the Row>Open settings> Check background tab
- Click the Column> Open settings> Check background tab
- Click the Module (like text, button, etc.) > Check its background settings
In many pre-built templates, backgrounds are often added at the Section or Column level to create structure and contrast between sections of the page.