[Resolved] image along bottom of page hero

[David]

Hello

I’m trying to add this image, so it’s sits along the bottom of a header…

https://www.crossfitchippenham.co.uk/wp-content/uploads/2019/12/grunge-top.png

I’ve add this to the css, but nothing is showing

.page-hero::after {background-image: url(https://www.crossfitchippenham.co.uk/wp-content/uploads/2019/12/grunge-top.png);}

It’s going to be for all headers, but you can take a look at this page…

https://www.crossfitchippenham.co.uk/home/

Any help on how to achieve this, would be much appreciated.

Thanks
Dave

[David]

Hi there,

try this CSS:

.page-hero {
    position: relative 
}
.page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background-image: url(https://www.crossfitchippenham.co.uk/wp-content/uploads/2019/12/grunge-top.png);
    background-repeat: no-repeat;
    background-size: cover;
}

[David]

That worked perfectly 🙂 thanks David

[David]

Is it possible to put a gradient over the header image instead of a one colour gradient?

[David]

Same method as adding the image – this topic has the CSS:

https://generatepress.com/forums/topic/linear-gradient-overlay-on-headers/#post-1031099

[David]

Thanks David

[David]

You’re welcome

[Author]

Posts