Change Text and Heading Background Colors in Divi Using CSS

One limitation of the Divi theme is that some elements in the design modules and Theme Builder for posts don’t offer options to change the background color of text and headings. That’s why using custom CSS is the best solution in these cases.

Step 1: Add a CSS Class

In the Advanced tab under Custom CSS, add the following CSS class:

pa-multi-line-highlight

Step 2: Add Custom CSS Code

In the main Divi tab, go to Theme Options and paste the following code:

.pa-multi-line-highlight h2, h3 {
  color: #ffb300;
  background-color: black;
  line-height: 1.7em;
  padding-bottom: 0px;
  display: inline;
  box-shadow: 10px 0 0px 0px black, -10px 0 0px 0px black;
  box-decoration-break: clone;
}

Note (for those who aren’t familiar with CSS — like myself):

• H2, H3, H1, p, span, etc. are the elements you want to apply background color or highlights to.
• color: changes the text color.
• background-color: changes the background color of the text.
• box-shadow: also needs to match your background color, as it controls the highlight border effect.

Step 3: Result