Enable Gradient Overlay with Parallax Background

by Feb 10, 2018Background Hacks3 comments

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

3 Comments

  1. Michael Burch

    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!

    Reply
    • John Stavola

      This is a great! And thanks Michael Burch – I was wondering why it wasn’t working – your suggestion fixed it.

      Reply

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.