How To Use The Missing Divi Background Image Settings On Parallax Sections Tutorial by Pee Aye Creative

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

Nelson Miller Pee Aye Creative
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

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

22 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
  9. Michael Dafoe

    When I turn on CSS parallax it scales up my image. How do I stop that from happening?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart