Gradient Overlay on an Image

[LevyRecognition]

I'm using the Sphere One Template to create a landing page. I want to use an image in the background of the header and then also further down the page. Right now, the page is set to the original gradients. I want to change the colors of that gradient to match our company's colors. When I edit the Gradient Overlay section of the template's CSS, the image doesn't show up and the gradient overlay is not transparent. How do I fix this so that the gradient matches our company colors, but still shows the image behind it?

CSS Link:

https://app.hubspot.com/beta-design-manager/4511859/code/6792643199

Landing Page Link:

https://app.hubspot.com/content/4511859/edit/6792644606/content

I'm changing the CSS in lines 766-771.

Thanks!

[MitchL]

Hi @LevyRecognition,

I'm not able to view these links, as it requires your hubspot login. Could you send the page preview instead?

[LevyRecognition]

Hi @MitchL

Do you mean a link like this: 

go.levymarketingawards.com/levy-is-evolving

I can send you some screenshots if that would help?

Original CSS:

What it looks like on the Landing Page:

My Changes to the CSS:

The Results:

[JasonRosa · Accepted solution]

@LevyRecognition if you look at the first section of CSS where the gradient was see through, you'll see a fourth number within the parentheses after rgba. This last number is what determines the opacity with 0 being completely transparent and 1 being not transparent at all. 

Therefore you'd want to add a comma after the last number in your rbga colors of the gradients and add the opacity that you want. I'd recommend trying 0.5 to start and tinkering around from there. Here is a resource on rgba as a reference. 

[LevyRecognition]

@JasonRosa

I feel silly.... I should have realized that when I first looked at it. Thanks so much for pointing it out! I really appreciate it! 🙂

[JasonRosa]

@LevyRecognition no problem at all! Happy that I was able to help.