How to change the colour overlay in header

Hi Guys,

Just wondering if you can tell me how to change the colour of the transparent overlay in the header in the Rocked Pro theme?

It’s currently set to a dark grey, you can barely see the image behind it, so I would like to make it lighter.


Hello Paul,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

body div.header-image::after {
    opacity: 0.5;

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

Kind Regards, Roman.

Thank you.

And how would I go about changing the colour of the overlay on the header from grey to another colour?

Hello Paul,

You can do it in Dashboard → Appearance → Customize → Colors section (the last option at the bottom, Header overlay).

Kind Regards, Roman.

Thanks Roman, and how would I remove the overlay completely?

Hello Paul,

You can use 0 (zero) instead of 0.5 in the CSS code above.

Kind Regards, Roman.