Background Blend Modes

Support
#1

I can’t seem to get any CSS blend modes to work on any of the various layers/elements in PRO like they used to before PRO released the added features of upper/lower background layers.
What I am trying to do is make a Column or Row have a color background that uses the CSS “background-blend-mode: multiply” to colorize an image in the background of the Section.

#2

Hi There,

Thank you for writing in, please provide us the page URL and point us the section in question.

The Row and Columns has the advance option too, why not use the upper and lower background feature? Please clarify.

Cheers!

#3

I am trying to create an effect similar to this image using a multiply effect.
Adding the css to the page, section, row, or column is having no effect.

#4

Hello There,

Regretfully you are using hex code. Please use rgba so that you can apply transparency for the colors. For example;

It is using this css code:

#yellowgrad {
    background-blend-mode: overlay;
    background: repeating-linear-gradient(-15deg,transparent,transparent 7px,rgba(150,150,150,0.5) 9px,rgba(150,150,150,0.5) 10px),radial-gradient(circle at top left,rgba(246, 198, 91, 0.5),rgba(215, 95, 0, 0.75));
}

Basically #f6c65b and #d75f00 were converted to rgba(246, 198, 91, 0.5) and rgba(215, 95, 0, 0.75). You can use this site, http://hex2rgba.devoth.com/, to do the conversion.

Hope this helps.

#5

Awesome. Thanks!

#6

The blend effect still doesn’t seem to be working after using your code. It’s just transparent now.

#7

Is it not possible to have the ‘column’ background color have a ‘multiply’ effect on the background of the ‘section’?
75% opacity is not the effect I’m looking for.

#8

Hello There,

You only added this:

#yellowgrad {
    background-blend-mode: multiply;
    background: radial-gradient(circle at top left,rgba(246,198,91,0.75),rgba(215,95,0,0.75));
}

And my code is this:

#yellowgrad {
    background-blend-mode: overlay;
    background: repeating-linear-gradient(-15deg,transparent,transparent 7px,rgba(150,150,150,0.5) 9px,rgba(150,150,150,0.5) 10px),radial-gradient(circle at top left,rgba(246, 198, 91, 0.5),rgba(215, 95, 0, 0.75));
}

Please have it updated to have the same effect as my screenshot. And if you want to apply the blend mode in the section background, you will have to do this things:

  • Add a custom my-section ID to your section.
  • And use this custom css
#my-section .x-bg {
    background-blend-mode: overlay;
    background: repeating-linear-gradient(-15deg,transparent,transparent 7px,rgba(150,150,150,0.5) 9px,rgba(150,150,150,0.5) 10px),radial-gradient(circle at top left,rgba(246, 198, 91, 0.5),rgba(215, 95, 0, 0.75));
}

Hope this make sense.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.