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 😀
