The Divi background options go far beyond the ability to add a simple background color. They're an advanced suite of tools that bring your backgrounds to life, including:

In this guide, we'll show you how to use it all. Let's get started!

Divi's Background options can be accessed by clicking to edit any module, column, row, or section.

Here, you'll have access to all of Divi's Background options, which include:

Additionally, you have access to Divi's magic color system. Colors can be edited, saved as global, or modified to choose harmonious colors for your designs.

You'll also find hover options, allowing you to change settings based on the user's mouseover actions.

There are responsive settings for the background. These allow you to change settings based on screen size.

There are six separate background tabs within the Divi background options. Each has a robust set of options to help you create gorgeous, one-of-a-kind designs for your web pages.

The first tab allows you to set the color of your background using Divi's advanced color system - a dynamic color system that allows you to create and edit colors that can be used throughout your website.

In addition, colors can be saved globally so that changes are simple and applied across your website. There's no need to click into every module, row, or section where colors are applied to edit them.

Divi's unique find & replace system allows replacing colors by right-clicking on any background color.

Check out our documentation to learn more about Divi's dynamic color system.

The Background Gradient tab enables you to create gradient effects for your backgrounds using the magic color system.

You can also add color stops to create unique gradients with four different gradient types. There are additional options for gradient direction, repeat, and gradient units. You can also apply a gradient over a background image.

This tab allows you to add background images to sections, rows, and modules. You can apply parallax effects, change background size and position, and repeat.

Additionally, you can choose from 16 different blend modes to create unique effects when combined with colors, gradients, patterns, and masks.

You can add video elements as backgrounds using the Background Video tab. Divi supports self-hosted video files in both mp4 and webm formats.

You can adjust the background video's width and height and how your video functions on the page. You can pause when not in view or while another video is playing.

Background Patterns add a unique look to your background with 24 different options. Settings include choosing the pattern color, horizontal, vertical, and flip options, as well as size and repeat origin.

Additionally, you can choose the horizontal and vertical offset and whether to repeat it. There are 16 blend modes to adjust the Mask's appearance in relation to other background tab settings.

Background Masks give you options to add shapes to your backgrounds.

There are 23 different shapes available with color, transform, and aspect ratio controls. You can also choose the size and blend mode options for masks.

To edit your Gradient:

You can add as many color stops as you would like.

You can choose a color from saved, global, or recent colors. Additionally, you can click within the color picker to choose a custom one.

To change the position of the stop, click and drag it to the location you wish. The closer the stops are together, the tighter the color blend.

There are four gradient types in Divi background options.

Each type gives a different effect for gradients. Experiment with gradient types to achieve the desired look. Let's explore the different gradient types so you have a better understanding of how they work.

You can choose the direction for your Gradient, with 180 degrees being the default position.

Modifying the gradient type's direction alters the look. Click the gradient slider or manually adjust it in the field to adjust a gradient.

As demonstrated in the previous section, gradient direction assists in changing the look of a gradient. In our example, a linear gradient with overlapping colors stops at a 147-degree angle, giving the appearance of a sharp-angled line between colors.

The gradient repeat option creates patterns in your gradient based on the color stops used.

Stops are the measurements that determine where the colors appear and end within the Gradient:

Additional color stops are used to blend the gradient. Gradient repeat can create visually captivating images within your background designs. They can be combined with two or more color stops and, depending on the gradient unit used will enable unique looks.

The example below uses three color stops set to 0, 2, and 4 percent.

When the repeat gradient toggle is enabled to yes, Divi will repeat the Gradient as many times as necessary to fill the available space.

Gradient units determine the measurement applied to the color stops in gradients.

Designs are altered based on the unit of measurement.

The last option for gradients is to choose whether to overlay your Gradient above a background image.

When toggled to yes, your Gradient will appear over an image if you add one.

To learn more about the Divi Gradient Builder, check out our documentation.

Another great feature of the Divi background options is adding an image to your background. The background image settings are on the third tab in the Background options.

Several effects can be applied to your images to add more interest.

The parallax effect gives the perception of life-like distance and motion utilizing two-dimensional animation.

The scrolling speeds of different elements in the background create the illusion of movement, which, in actuality, the element remains fixed.

To enable the parallax effect in Divi's background options, toggle the parallax effect to yes.

If enabled, choose between true parallax (JS) or CSS.

True parallax uses a combination of CSS and JavaScript to create a slower, more life-like representation than other elements on the page.

When using the CSS method, only CSS is used to create the effect. The background is held in place while the other elements on the page scroll normally.

Control the position of your Image. Choices are:

You can set the horizontal and vertical offset depending on your chosen image position.

To adjust the offset placement, click the offset slider to adjust the Image's horizontal or vertical offset position.

This option will repeat the background image if enabled. You can choose between:

Blend modes allow for different effects to be incorporated into your images.

Overall, there are 16 blend modes to choose from.

Within the Divi background options, users can add two types of self-hosted video formats:

This is where you specify the height and width of your Video.

If multiple videos exist on your webpage, you can pause the video while another plays. To enable this feature, be sure to toggle this option to yes.

Enable this option to pause the video while your site's visitors view other content. This is especially useful if the Video contains pertinent information you want users to see.

Divi background patterns can be combined with colors, gradients, images, videos, and masks.

Patterns will sit on top of other elements to provide depth and visual appeal when enabled.

Divi comes with 24 pattern options to enhance your background design. Patterns can be flipped, rotated, and inverted to create unlimited looks.

As with other Divi background options, users can edit the color associated with patterns. In addition, the opacity can be adjusted.

Users can edit or create swatches from recent, saved, or global colors using Divi's magic color system. Refer to our documentation on the Divi color management system to learn more.

Once you set a pattern, you can use pattern transform to alter its appearance. You can flip it horizontally or vertically, rotate it, or invert it for an even more unique look.

The size of your pattern can be changed in several ways.

With custom size, you can adjust horizontal and vertical elements by clicking on their respective sliders.

This option controls which position to repeat the pattern. Because patterns are seamless and repeatable, you'll want to set the position of your pattern. Users can choose a center, left, right, or bottom position like background gradient and Image.

This allows you to choose the point your pattern begins, with horizontal and vertical options. Click on each slider to adjust the vertical or horizontal offset position.

You can choose the type of repeat applied to your pattern. Choices are

Divi's pattern blend mode allows 16 options for blending your pattern into your background color, Gradient, Image, or Video. Each has a different effect, so we encourage familiarizing yourself with the options to choose the best look for your design.

Background masks use positive and negative space to create shapes for your designs. They are placed on top of gradients, images, videos, and patterns to create striking backgrounds.

Combined with other elements, you can create unique background designs where no two backgrounds are identical. There are 23 mask options to choose from.

In addition to adding background masks, you can choose a mask color and transform it by flipping it horizontally or vertically, rotating it, or inverting it.

The mask aspect ratio has several orientations:

The mask color can be a static color of your choosing. Additionally, you can choose to use a recent, saved or global color.

Another option is to use Divi's dynamic color system to choose a color for your Mask. Opacity can be adjusted on your color to reveal other elements being used in background options.

The mask transform setting allows you to flip your Mask horizontally or vertically and rotate or invert it.

The mask aspect ratio allows several orientations to change the Mask's appearance. By default, the portrait is selected. Other options are square and landscape.

Four Mask sizes are available with Divi background options:

These allow you to control the position of your Mask.

There are 16 blend modes available to apply to your masks: multiply, screen, overlay, darken, lighten, color dodge, color burn, hard light, soft light, difference, exclusion, hue, saturation, color, and luminosity.

Each one allows for different effects for your masks.

To learn more about using Divi's background options, check out some of our useful tutorials and information to assist you in creating beautiful backgrounds for your Divi websites.