Code by Day | Explore By Weekend

How To Use The Missing Divi Background Image Settings On Parallax Sections

How To Use The Missing Divi Background Image Settings On Parallax Sections

Every wonder why the Divi section background settings disappear when you turn on parallax? Here's something to help.

Parallax Turned Off

Parallax Turned On

/*background image color*/
.pa-parallax-background-image-color .et_parallax_bg:before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.6);
}

Background Color

/*background image gradient color*/
.pa-parallax-background-image-gradient .et_parallax_bg:before {
content:"";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 195, 170, 0.70)), to(rgba(122, 87, 209, 0.70)));
background-image: -webkit-linear-gradient(left top, rgba(0, 195, 170, 0.70), rgba(122, 87, 209, 0.70));
background-image: -moz-linear-gradient(left top, rgba(0, 195, 170, 0.70), rgba(122, 87, 209, 0.70));
background-image: -o-linear-gradient(left top, rgba(0, 195, 170, 0.70), rgba(122, 87, 209, 0.70));
background-image: -ms-linear-gradient(left top, rgba(0, 195, 170, 0.70), rgba(122, 87, 209, 0.70));
background-image: linear-gradient(left top, rgba(0, 195, 170, 0.70), rgba(122, 87, 209, 0.70));
}

Background Gradient

/*background image size*/
.pa-parallax-background-image-size .et_parallax_bg {
background-size: cover;
}

Background Image Size

/*background image position*/
.pa-parallax-background-image-position .et_parallax_bg {
background-position: center;
}

Background Image Position

/*background image repeat*/
.pa-parallax-background-image-repeat .et_parallax_bg {
background-repeat: repeat;
background-size: initial;
}

Background Image Repeat

/*background image blend*/
.pa-parallax-background-image-blend .et_parallax_bg {
background-color: #2cba6c;
background-blend-mode: multiply;
}

Background Image Blend

12
Last updated Jan 3, 2021 @ 1:15 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
snake
snake
1 year ago

unfortunately, this is not working at all for me.
I added the required class to the section custom CSS ID and classes, and I added the CSS in the divi custom css section, but it is having no effect.

Trisha Dingillo
Trisha Dingillo

this is what worked for me in divi 4.0
wouldn’t have figured it out without your help!

.et_parallax_bg_wrap :before {
content:””;
display: block;
height: 100%;
background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%) }

Ramon Buzon
9 months ago

Hi Nelson, let me suggest you an even faster trick to show the Background Color Overlay + Parallax effect:

1. Paste this into Advanced> Custom CSS> Main Element:

background-attachment: fixed;

2. Deactive “Use Parallax Effect” from Content> Background> Image

It Hope it helps! 😉

Neil Payne
Neil Payne
8 months ago

Many thanks Nelson. This article addresses exactly what I am trying to achieve. However I’ve tried copying and pasting your exact snippet into CCS Class, but it’s not adding the background image blend:

/*background image blend*/
.pa-parallax-background-image-blend .et_parallax_bg {
background-color: #2cba6c;
background-blend-mode: multiply;
}

Is it correct for me to paste the entire above code into CCS Class or am I doing something wrong?

Daniel
Daniel
2 months ago

I am getting a CSS error stating “expected rbrace” on line 1 (next line after comment line) I can’t work out the error and I copied your code and I have added the css class.

/*background image size*/
.pa-parallax-background-image-size .et_parallax_bg {
“expected rbrace”
background-size: cover;
}

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart