CSS blend mode error

[Eulogise]

Hi, I saw this article related to my issue:

Background Blend Modes

However when I follow the instructions it doesn’t solve my issue.
I want to have a multiply blend mode applied on a gradient colour over an image, similar to the ticket above.

I am using X theme Pro.
I have added the image as a background in the content row settings.
I have then added a text element within the row and used CSS in the child theme css stylesheet to target the class of the text element with the following:

background-image: linear-gradient(to right, rgba(61,196,208,.7), rgba(61,196,208,.7), rgba(61,196,208,0));
background-blend-mode: multiply;
z-index: 99;

There is an error message in the side of the CSS editor saying “uknown property - background-blend-mode”

I tried to follow the advice in the support ticket linked above, but I’m not sure that is for the same structure as I am using, so it hasn’t worked.

Can you advise

[christian]

Hey Ben,

Before I answer your question and give you a tip, I’d like to make clear first that image blending is not a feature offered in the theme and it would need custom CSS to achieve this and that is outside the scope of our support. Please see our Terms. I’m sorry if it was not made clear in the previous thread.

With that said, I will not touch on the custom code issues but I would rather give you a tip or show you how to achieve the effect you’re after in Pro or Cornerstone. Please see the screencast at https://youtu.be/jbbPwuwtNGI

Here’s the code in that video to be inserted in the Element CSS to get you started:

$el {
  background-image: linear-gradient(to right, red , yellow), url(YOUR_IMAGE_URL), url(YOUR_IMAGE_URL);
  background-blend-mode: overlay;
  background-size:cover;
}

Below are links to the resources:

• https://www.w3schools.com/cssref/pr_background-blend-mode.asp
• https://www.w3schools.com/css/css3_gradients.asp

Hope that helps and thank you for understanding.

[Eulogise]

Thanks for the follow up.

I am not using cornerstone for the page layouts, as I find it overly complicated and restrictive. I prefer css in a stylesheet and just simple element blocks like Bakery has.
However, that snippet worked. Thankyou.

I was using the background image in the Visual Composer element, but I see in your snippet, the image and the blend mode and gradient are all within the one class used on a single element. I’ve never seen it done like this but it worked.
Thanks.

The CSS editor in the WP Appearance menu still shows a warning that it doesn’t recognise the blend mode. Not sure why, because it’s well supported CSS and it works.

thanks

[basanta]

We are glad that it works for you!

Thanks