The Background Options in Divi 5 allow you to style modules, columns, rows, and sections with colors, gradients, images, videos, patterns, and masks. These settings are fully customizable and support responsive design, letting you apply different styles across devices.
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 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 Customization
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.
Optimize 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. |