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 😀