topic Re: Gradient Overlay on an Image in CMS Development

Gradient Overlay on an Image

LevyRecognition — Fri, 04 Jan 2019 15:21:40 GMT

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!

Re: Gradient Overlay on an Image

MitchL — Fri, 04 Jan 2019 18:58:55 GMT

Hi @LevyRecognition,

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

Re: Gradient Overlay on an Image

LevyRecognition — Fri, 04 Jan 2019 20:41:16 GMT

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:

Re: Gradient Overlay on an Image

JasonRosa — Mon, 07 Jan 2019 18:52:12 GMT

@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.

Re: Gradient Overlay on an Image

LevyRecognition — Mon, 07 Jan 2019 19:52:59 GMT

@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! 🙂

Re: Gradient Overlay on an Image

JasonRosa — Mon, 07 Jan 2019 19:54:18 GMT

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