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 😀
Thank you so much.
Excellent! Thanks so much for this solution. One thing to polnt out is that this does NOT work if one has already selected an image and gradient prior to pasting in the custom CSS code. I had to remove the existing image and gradient and follow the steps just as you outlined. When I did that, it worked perfectly!
This is a great! And thanks Michael Burch – I was wondering why it wasn’t working – your suggestion fixed it.