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

Illdy
1

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?

2

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,
Support

3

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?

4

Hi,

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,

Thanks,
laranz.

5

That works beautifully, thank you!

6

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.

7

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,
Support

8

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

9

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,
Support

11

This case is resolved and I will close it