[Resolved] How can I set a background gradient for Element Header Image

[Sam]

I am using an element header as site wide header (other than on my front page which is using GP block and a zero header element)

I would like to be able to add a gradient to the image used in the (site) element header – but can’t seem to figure out how to get to work

The gradient is I would like is

linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(20,70,160,1) 82%);

With the image Opacity set to 0.7

This would then style my site header in the same colour config as my front page

https://www.staging.watersportswhiz.com/
https://www.staging.watersportswhiz.com/boats-and-boards/

[David]

Hi there,

it cannot be done exactly in the Header Element as you have it set up in your Block Element.
In your Block Element the Gradient is the CSS Background and the Image ( set to Pseudo Element ) overlays the background.

Whereas in a Header Element the CSS Background is the image and any CSS such as this would overlay the Image:

.page-hero,
.inside-page-hero {
    position: relative;
}
.page-hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: /* add your linear gradient here */
}

This would give completely different results.
The workaround would be to switch the Block elements settings around:

1. set the Background Image to Element – leaving the opacity as 1
2. Set the Z-index for the inner container to 1.
3. Then set the Gradient to a pseudo element.
This will overlay the Image, so the Gradient will need to be transparent.

Then use the above CSS with the same linear gradient.

[Sam]

thanks David

[David]

You’re welcome

[Author]

Posts