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

Last updated Jan 3, 2021 @ 1:15 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

20 Comments

  1. snake

    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.

    Reply
      • 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%) }

    • Chris

      Replace “:before” with “::before”. Then it works. The pseudo class has to be noted with double colons.

      Reply
  2. Ramon Buzon

    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! 😉

    Reply
  3. Neil Payne

    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?

    Reply
  4. Daniel

    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;
    }

    Reply
  5. Mark Dalley

    Hi Nelson,
    Super helpful, as always. Thanks!

    I’m wondering if the same concept/code could be used for modules. In particular, i’d like to use it on a slider or fullwidth slider individual slide backgrounds.

    Reply
  6. RafaS

    Hello ! I think that this is the article that i was looking for ! But i’m 0 in code… i’m getting errors everywhere : “Expected RBRACE.” and ” Unexpected token”}” “. I copied the code then went to “Advanced => CSS ID&Classes => CSS ID : “blank” // CSS class : pa-parallax-background-image-size pa-parallax-background-image-position.

    Then in “Custom CSS” I copied the code you share us in the right element (“main element” / “header”…)

    I deactivated the Divi “true parrallax” before i done that.

    Best regards,

    RafaS.

    Reply
  7. Arlene Seydoux

    Hi Nelson – I was wondering if it would be possible to add css that would make the background parallax image move horizontally on scroll.

    I have the background image in a section
    Layered on top of that I have a row with a patterned wave background (just for fun)
    Final top layer is a divider module containing a knockout png “mask” ( I will change mask to svg eventually)

    I am trying to achieve the effect of water moving horizontally behind the mask. How cool would that be?!

    The example is on a staging site, time limited for those of you looking at comments…

    Reply
    • Hemant Gaba

      Hey Arlene,

      I understood what you are trying to achieve but I am not sure that we can achieve it exactly with parallax and CSS. I would suggest you to use a gif of moving water as it will be much more straightforward then this. But if you trying to achieve with Parallax then please enable the parallax effect first and let me know so that I could try some CSS to make it possible.

      Reply
  8. Trish Meyer

    Thanks for these tips! I found the image placement was more versatile by using % instead of “center” etc.

    I added this to the Page’s CSS by clicking on the purple gear at the bottom of the Visual Editor (that way I can use different percentages on different pages for different images).

    The 50% centers it horizontally, and the 100% seems to work for my particular image (it places the vertical center at the bottom of the section).

    /*background image position*/
    .pa-parallax-background-image-position .et_parallax_bg {
    background-position: 50% 100% !important;
    }

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart