[Support request] Header transparent image overlay

[Len]

I want a background image with a colour gradient overlay for the website header.
Setting a background image is OK, also setting a colour is OK.
But how do I get a combination of both together, with the colour overlaying the image?
Is there a way to have a gradient rather than just one colour, again as an overlay?
I am sure I can handle this with CSS, but would rather be able to do it in the customiser if possible.
(Please Note: no website as such, its in a test area as new to generatepress so trying things out).

[David]

Hi there,

is this the Site Header or using a Header Element:

https://docs.generatepress.com/article/header-element-overview/

[Len]

The site header, just looking at the obvious functions in the customiser, not looked at what elements are yet.

[David]

Either one would require some CSS to add the gradient overlay.
Add the background image to the Header and then add this CSS:

.site-header, .inside-header {
    position: relative;
}

.site-header:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255,0);
    background: linear-gradient(174deg, rgba(255, 255, 255, 0) 30%, rgba(0, 212, 255, 1) 100%);
}

Adjust the linear-gradient to suit.
This site is great for that:

https://cssgradient.io

[Author]

Posts