Add low-opacity coating over jumbotron/all header images?

Hey there,

Wondering if there’s some CSS magic that could add a low-opacity black coating over all header images (front page jumbotron, blog archive, individual blog posts). I’ve been manually lowering the exposure & contrast of these images, which takes a little more work & is a little limiting (e.g., I’d like for the blog post featured images to be full-color when previewed, but faded when used as the header of the post page). Thoughts?

Hello there,

I hope you are doing well today.

You can use the following CSS code to add a color overlay to the Jumbotron image by going to Appearance > Customize > Additional CSS and pasting it there.

/*Color overlay*/
#header.header-front-page::after {
    background-color: rgba(219, 35, 35, 0.2);
    z-index: 2;

Best Regards,

Hm—still not working for some reason. Everything I’m reading online says that that code should work perfectly, but it’s not clicking. Any idea why?


Can you try this Custom CSS, this is for home page Jumbotron, Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

#header {
    position: relative;
    display: inline-block;

#header::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: -webkit-linear-gradient(rgba(20,20,20, .5), rgba(20,20,20, .5));
  background: linear-gradient(rgba(20,20,20, .5), rgba(20,20,20, .5));; 

You can adjust the color using the linear-gradient property.

Let us know,


That works beautifully, thank you!

I have a problem using the last solution on Illdy theme.
The overlay appears when I am in the admin wordpress in Appearance -> Customize -> Additional CSS.

However, it doesn’t appear on the website.

Hello there,

I hope you are doing well today.

Please try to clear your browser cache as the browser may be using the cached page.

Here is a link showing how:

Best Regards,

It’s ok now.
Thanks for the solution :slight_smile:

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,

This case is resolved and I will close it