Archived topic

image along bottom of page hero

6 replies · Started by David on December 5, 2019

Viewing posts 1–7 of 7

December 5, 2019 at 3:18 am #1094293

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

December 5, 2019 at 6:10 am #1094483

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;
}

December 5, 2019 at 6:21 am #1094495

That worked perfectly :) thanks David

December 5, 2019 at 6:42 am #1094511

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

December 5, 2019 at 8:03 am #1094709

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

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

December 5, 2019 at 8:35 am #1094748

Thanks David

December 5, 2019 at 9:03 am #1094797

You're welcome

This archived topic is closed to new replies.

Start building better websites today.