Gradient overlay over background image

[bartenderonduty]

Hey Themeco Team,

I’m trying to add a gradient overlay over an image I’ve added to a background lower layer of a section. I tried several suggestions I found in your support forum, but none of the seem to work. Can you please recommend a way to add a gradient overlay to a section?

Thank you!

[ruenel]

Hello @bartenderonduty,

Thanks for writing in!

The section background option only allow you to have a solid background color, a background image or insert a background video. Inserting a gradient overlay can only be possible with custom css which targets the upper layer. In your section settings, find the “Customize” tab and insert this element css:

$el .x-bg .x-bg-layer-upper-color {
   	background: rgb(89,0,135);
	background: -moz-linear-gradient(26deg, rgba(89,0,135,0.01) 0%, rgba(87,17,163,1) 0%, rgba(80,64,236,1) 44%, rgba(60,146,225,1) 75%, rgba(44,212,217,1) 100%);
	background: -webkit-linear-gradient(26deg, rgba(89,0,135,0.01) 0%, rgba(87,17,163,1) 0%, rgba(80,64,236,1) 44%, rgba(60,146,225,1) 75%, rgba(44,212,217,1) 100%);
	background: linear-gradient(26deg, rgba(89,0,135,0.01) 0%, rgba(87,17,163,1) 0%, rgba(80,64,236,1) 44%, rgba(60,146,225,1) 75%, rgba(44,212,217,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#590087",endColorstr="#2cd4d9",GradientType=1);
}

I am using this Gradient Generator here: https://cssgradient.io/

Hope this helps.

[bartenderonduty]

This is fantastic, works great! Thank you very much.

Would it be possible to put this CSS in the child theme so if any updates need to be made to it they will be reflected across the entire site?

[friech]

Hi @bartenderonduty,

Yes it is possible with a CLASS

e.g.

body .my-class-name .x-bg .x-bg-layer-upper-color {
   	background: rgb(89,0,135);
	background: -moz-linear-gradient(26deg, rgba(89,0,135,0.01) 0%, rgba(87,17,163,1) 0%, rgba(80,64,236,1) 44%, rgba(60,146,225,1) 75%, rgba(44,212,217,1) 100%);
	background: -webkit-linear-gradient(26deg, rgba(89,0,135,0.01) 0%, rgba(87,17,163,1) 0%, rgba(80,64,236,1) 44%, rgba(60,146,225,1) 75%, rgba(44,212,217,1) 100%);
	background: linear-gradient(26deg, rgba(89,0,135,0.01) 0%, rgba(87,17,163,1) 0%, rgba(80,64,236,1) 44%, rgba(60,146,225,1) 75%, rgba(44,212,217,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#590087",endColorstr="#2cd4d9",GradientType=1);
}

Then add the CLASS my-class-name to the sections that you want to have that specific background.

More details about classes - Basic CSS: Use a CSS Class to Style an Element

Cheers!

[bartenderonduty]

This is perfect, thank you! I appreciate your help with this.

[rad]

You’re most welcome!