Archived topic
Header transparent image overlay
3 replies · Started by Len on November 29, 2019
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).
Hi there,
is this the Site Header or using a Header Element:
https://docs.generatepress.com/article/header-element-overview/
The site header, just looking at the obvious functions in the customiser, not looked at what elements are yet.
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:
