Darken "Featured Image" Photographs - CSS/HTML code?

Hi All,

I’ve begun using Illdy again - I think it reflects my personality a bit more. I have a question…

I absolutely LOVE the huge header images across the site, from the jubotron on the homepage to the ones on the blog. But, I don’t want to keep editing my photographs to make them darker so the headline text reads better. Is there a CSS/HTML code I can write to do this across the entire site for me?

Casing point, the homepage: www.ianpinnell.co.uk and this page: http://ianpinnell.co.uk/hbauk2018-windsor/ - Notice how the bold white letters don’t show up properly over the images? If I could get a HTML/CSS code to darken the big photo sections across the site, that would be handy!

Any advice would be appreciated.

Ian

Hi Ian,

This is not something that can be easily done with CSS. The structure of that area would need to be modified to make it possible to place an overlay on top of the image. This is because the image is set a background for a div.

You can try and do the modification on your own with a guide like this - Tinted Images with Multiple Backgrounds | CSS-Tricks or you can ask for help on this from guys like https://colorlib.com/out/envatostudio

Cheers.

Hi there!

I was browsing the forum and came upon your request. I had the same problem with my website. Just add this code in your Additional CSS. You can change the alpha value to your liking.

/* background tint for bright images */
#header .top-header,
#header .bottom-header{
background: rgba(0,0,0,0.7)!important;
}

Hi 0nikhil0!

That worked a treat, THANK YOU!

And thank you ‘Support’ for your help too. Perhaps this is a neat bit of code we could keep somewhere safe for other users of the theme who wish to do this?

Thanks again both, much appreciated.

Hey there @ianpinell,

I’m so glad that worked for you. Also thanks so much 0nikhil0 for helping out. I’ll share that with the rest of team.

Best Regards,
Support