The Divi theme allows you to overlay the background gradient over the background image, giving the section a really sleek look. Unfortunately, you lose this ability if you want to have a parallax background.

The code below allows you to set a gradient to overlay the parallaxed background image.

①   Copy and paste the following CSS into the Custom CSS box.

/****** Add overlay to parallax sections *******/

.gradient-overlay:before {
   content:"";
   position:absolute;
   z-index:1;
   background:inherit;
   top:0;
   bottom:0;
   width:100%;
}
.gradient-overlay .et_pb_row {
   z-index:2 !important;
}
.gradient-overlay {
   background-color: transparent;
}

②   Type or Paste gradient-overlay in the section’s CSS classes box.

③  Go to the background image tab and set your image. Make sure to turn ON the background parallax option.

④  Go to the background gradient tab to configure your gradient.

*Note: This makes use of this section’s Before pseudo-element so this may not work if there is already some custom styles set in the section’s before box.

Done!

Give this page a share, like, or comment if this worked for you! Leave a comment if you have a question or want to share some love 😀