[Resolved] transparent background color and bg image

[Jasper]

Can i have a transparent bg color for the header together with a header bg image?

Now it seems to give preference to the image.

[Tom]

Like an overlay color over the image?

Not currently – there’s no method for adding an overlay colors over a background image in CSS.

It would require some extra CSS to be added like this (not sure if it will work, just a though):

.site-header:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    opacity: .6; 
    display: block;
}

.inside-header {
    position: relative;
    z-index: 1;
}

That assumes you’re use the site header and not the Page Header add-on.

• This reply was modified 10 years ago by Tom.
• This reply was modified 10 years ago by Tom.

[Jasper]

yes, like an overlay

the css does not work
i use the header with the navmenu float right

[Tom]

Can you link me to your site?

[Jasper]

http://platform.sierink-wp.nl/

[Tom]

Try the adjusted CSS above: https://generatepress.com/forums/topic/transparent-background-color-and-bg-image/#post-181898

[Jasper]

that does it, thanks

[Tom]

You’re welcome 🙂

[Cynthia]

Hi Tom – I would like to have my content background color transparent, specifically
rgba(0, 14, 35, 0.6); however the customization area – Colors > Content > Background field does not accept that value. So, when I attempt to use the Simple CSS area this doesn’t work either.

content {
background-color: rgba(0, 14, 35, 0.6);
}

Any suggestions?

[David]

Hi Cynthia,

on the color palette the second slider adjusts the transparency. Just adjust this and then the color field will become rgba – once done copy, highlight all the field and paste =)

[Cynthia]

David – Thank you for pointing out that 2nd slider….I’ve never noticed it there! LOL.

And BTW – I realized that I am able to enter the value: rgba(0, 14, 35, 0.6) but just without the ; at the end. The semicolon was making the field not accept the value.

The slider is definitely easier.

THANK YOU!!

[David]

You’re welcome Cynthia

[Author]

Posts