How to change header-image background-color opacity

Dear sir, I need to change header-image background-color opacity: it results too dark, I suppose.

So I change CSS as shown above:

.header-image {
    background-color: rgba(37, 46, 53, 0.4) !important;

but it does not work! Could you help me, please? Thanks, a lot.

Hello @mp1000751,

Please try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.header-image::after {
    background-color: rgba(37,46,53,0.6) !important;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

1 Like

Hi, I have tried over and over to lighten the overlay on the astrid header image. I’ve installed the CSS plugin and tried copying and pastying the various different options suggested here and nothing at all has changed. Can someone help please?

Hello @alychef,

Did you try the solution above?

Kind Regards, Roman.

yes. As per my message. I tried them all.

Okay @alychef,

I will be glad to help you, but can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.

I changed header-image background-color opacity it work very good. But when i small my browser then color opacity not change. So can you help me?

Hello sabbir3danimator,

Please create a new topic for your issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.