Learning Center

Backgrounds are available for any element in Divi – sections, rows, columns, and modules (as well as sub-elements, like slides, toggles, and tabs) – and there are lots of types of backgrounds available, including solid colors, gradients, background images, background videos, columns, patterns, and masks.

Background Areas

• Section backgrounds and fullwidth module backgrounds tend to take up the fullwidth of your website.
• Row backgrounds take up the width of your main content container. The background will be behind all of the columns in a row, regardless of the number of columns.
• Columns backgrounds are more rarely used but are particularly helpful if you want multiple modules in a column on top of one background.
• Module backgrounds only exist behind the content of that particularly module.
• Within some modules, you might have sub-elements – you’ll see these as slides in a slider module and toggles in an accordion module. Each individual sub-element can have it’s own background. This is most commonly seen in the Fullwidth Slider Module when you want a different background image behind each slide.

In all instances, you will:

1. Click on the gear/settings icon for the particular area
2. In the Content tab, scroll down and click on the Background toggle
3. Select the type of background you want (and these can be combined):
   1. Background Color
   2. Background Gradient
   3. Background Image
   4. Background Video
   5. Background Pattern
   6. Background Mask
4. Make any adjustments, upload content, etc.
5. Save the area
6. Save the page

Background Types & Options

Click on each of the horizontal tabs under Background to select a different background type.

Background Color

• Select a solid color from your palette by clicking the plus + icon to Add Background Color
• Edit a selected color by hovering over the large block of color and clicking the gear/settings icon or just click on the large color block
  • Paste in a hex code OR drag-and-drop the circle to a different location
  • Move the first vertical draggable slider on the right to adjust the tone
  • Move the second vertical draggable slider on the right to adjust the transparency
  • Click the checkbox to save the color
• Remove the background color by hovering and clicking the delete icon
• Revert to the original background color by hovering and clicking the refresh icon

Background Gradient

• Click the plus + icon to Add Background Gradient
• Click on the circles in the slider to change the colors
• Click on the slider to add additional gradient stops
• Select the dropdown under Gradient Type to change the type of gradient (how it spreads)
• Change the angle to change the Gradient Direction
• Enable Place Gradient Above Background Image if you want a gradient on top of an image (the Background Image Blend MUST be something other than Normal)

Background Image

• Click the plus + icon to Add Background Image
  • Upload an image or select one from your Media Library
• Use Parallax Effect – this keeps the image in place as you scroll to give the appearance of motion
  • The two types of parallax – True vs CSS – have distinctly different looks (note that it has been reported that True does not work on Safari, but if you’d like to use it, email support@worshiptimes.org, and we can apply a fix)
• Background Image Size
  • Cover – stretches the image horizontally to fill the background and autocrops vertically (most common)
  • Fit – scales the image down so that the entire image fits in the space
  • Actual Size – adds the image add the pixel size of the uploaded image
  • Stretch to Fill – stretches the image horizontally AND vertically to fill the entire space; distorts the image
  • Custom Size – allows you to set the parameters
• Background Image Position – this allows for some manual positioning if you don’t like the automatic cropping; typically only Top Center, Center, or Bottom Center matter when using Cover; others are useful for other Background Image Size options
• Background Image Repeat – if you change the Background Image Size to something other than Cover, you can repeat/tile the background
• Background Image Blend
  • Most options require that a solid color or gradient also be set
  • The most common option here is Overlay, which allows for a screen on top of the image (useful if you need to add text on top) – Screen also works with slightly different results.
  • Luminosity is useful if you’d like to make the image B&W
  • Luminosity plus a solid color is a great effect that keeps colors consistent across your site

Background Video

• See the Divi Background Videos article for specifications and best practices

Background Pattern

• 24 pre-built patterns (like graphic tiles that line up seamlessly) that can be used as a background
• Often combined with solid colors or gradients
• Colors can be applied
• The pattern can be flipped or inverted
• To make the pattern occur at a smaller scale, change the Pattern Size to Custom Size and set the Pattern Width and Pattern Heigh to a low pixel number

Background Mask

• 23 pre-built masks (like stencils) that cut out part of the background
• Often combined with other background types
• Colors can be applied
• The mask can be flipped or inverted