How to Tint Hero Image?

Shapely
1

Hi Movin,

Thanks so much for your help so far. I have another question for you.

Is it possible to darken my hero image slightly? ie: to make it easier to read the White text? I’d like it to have an effect like a transparent wash on top of the image.

For an example, see the “Tinting” section of this link: Design Considerations: Text on Images | CSS-Tricks

I tried to find a way to add custom css like what’s shown on that page, but I can’t see how to do it without explicitly referencing the image. Do you have another way to do this?

Thanks,

Holly

2

Hi Holly,

I hope you are well today and thank you for your question.

Could you please share me your site URL where the hero image is displaying so that i can help you?

Best Regards,
Movin

3

Hi Movin,

It’s www.hollyburton.ca.

Thanks for all your help!

Holly

4

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

.parallax-window {
    background-color: rgba(0,0,0,0.1);
}