Here’s an example of the gradient overlaying the fixed or parallaxed background image.

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 {
.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.


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 😀