[Resolved] How to manage the visibility of the header background-image for different pages

[Hans-Hermann Loewer]

Hi Tom and team,

in the customizer under -> backgroundimages -> header-area
one can choose a picture and its reply-rate, position etc.

How can I stop showing that picture for special pages via CSS?

AND/OR:

Is it possible to give each sub-page an individual backgroundimage for that header area?
(NOT the Logo image! of the header)

Thanks in advance!

Hermann

[David]

Hi there,

could you use a merged Header Element to create the style you’re looking for?

https://docs.generatepress.com/article/header-element-overview/

[Hans-Hermann Loewer]

Hi David,

no, I can´t. I want to have the header I have, but change the background-image in a subpage.

What is the right CSS-address for the background image in the header area?

Is it possible, if I use the page-id to say “display: no” for that image in that page and to show it in another with the same header-elements?

Thanks in advance!

Hermann

[Leo]

To remove the site header background image on a specific page, you’d do something like this:

body.page-id-xxxx .site-header {
    background-image: none;
}

To add a specific site header background image on a specific page, this would be it:

body.page-id-xxxx .site-header {
    background-image: url(URL-HERE)
}

Just place xxxx with the actual ID of the page.

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Hans-Hermann Loewer]

Thank you, Leo!

Hermann

[Leo]

No problem 🙂

[Author]

Posts