[Resolved] Override Global header elements

[Svetoslav]

Hi Tom,

I have a scenario where I can set a global header for all pages but would like to override the background image for each individual page. I’m pretty comfortable coding something myself but wanted to check incase you have already thought of something :-).

Thanks in advance.

[Svetoslav]

I am using GP 1.4.3

[Leo]

Hi there,

Are you referring to the header background image or page header?

Let me know.

[Svetoslav]

Ho Leo,

I am referring to the header background image.

Thanks

[Leo]

If you use Tom’s Simple CSS plugin, it gives a CSS metabox on each page, then you can overwrite the header background image by doing this:

.site-header {
    background-image: url(http://page-specific-image);
}

https://docs.generatepress.com/article/adding-css/#simple-css

Or else you find the page ID and do this:

.page-id-xx .site-header {
    background-image: url(http://page-specific-image);
}

[Svetoslav]

Thx Leo. That helps allot.

[Leo]

No problem!

[Author]

Posts