Different Header Images

Hello,

I’d like to be able to use a different header image for each page/category. I came across a similar thread, but it only addresses pages.

What custom css can I use to set a unique header image for the following:

  1. http://kristismithyoga.com/category/wellness/strength-training/ [category]
  2. http://kristismithyoga.com/kristi/ [page]

I understand that pages have numeric identifiers, but I don’t know how to determine what those are. Also, I don’t know if categories do…Also, in case it helps - the code I found from the previous thread (I don’t know if it works, btw) for pages only is:

.page-id-29 .header-image {
background-image: url(#);
display: block;
}

Thanks for your help!

Hi,

You can do it like this:


.category-strength-training .header-image {
   background-image: url(#);
   display: block;
}

and


.page-id-2 .header-image {
   background-image: url(#);
   display: block;
}

You can find the page ID in the URL bar when you edit your page and for the categories you can see in the code that it’s the category slug you need to use.

Thanks, Vlad. The code didn’t do anything, though - I still get the same header image everywhere…

You need to replace # with your url. So it’s url(http://yoururl.com);.
Sorry for not explaining properly.

Thanks! That worked. Now, though, as soon as I begin to scroll down the page the menu disappears and a big white “block” replaces it above the header image. If I scroll a bit more, the menu returns. It doesn’t do this on the home page, but does it on the others.

For example: kristismithyoga.com v. http://kristismithyoga.com/category/wellness/strength-training/

Is there a way to make this white bar go away? Thanks!

Also, “services” is described as “archive-for-services” and is neither explicitly a category nor a page. What would I substitute for category/page in the code? Thanks!

http://kristismithyoga.com/services/

Sorry to keep adding additional posts! I just (temporarily) deactivated the custom css until I could find some resolution. I have one more question, bringing the total to 3:

When I use the above code to create a unique header image for each page/category, it works! But, when I’m in my blog and click on a specific blog post, the header image reverts to my home page header image.

Question #3 is how do I ensure that the blog posts in the same category have the header image of that category? Is it a setting in the post itself somewhere?

Thanks for your help!

  1. Your header bar is set to be in a relative position on all pages except the front page, where it’s set to absolute. This is done from your custom CSS with this part:

.site-header.fixed {
    position: relative !important;
}

I assume I gave this code to you but I don’t remember why you wanted it.
2. .post-type-archive-services .header-image
3. That’s not possible I’m afraid.

Thanks, Vlad.

  1. I looked at my custom css and it turns out I had that exact code already in place. Since I’m still getting the white space everywhere other than the front page, could something else be going on?

  2. Thank you!

  3. :frowning: Oh well.

Thanks again for your help :slight_smile:

Oops. I misread your instructions regarding the absolute/relative thing. I got it! No more questions. Thanks Vlad!

Hi Vlad,

Let me know if I need to start a new thread, but your coding above worked great to insert a specific header image for a page. However, the change didn’t carry over to mobile. Can you advise if there is special code to ensure a specific header appears on mobile too?

.page-id-2 .header-image {
background-image: url(#);
display: block;
}

Thanks!

can´t get it working, absolutely nothing is happening … :confused:

Hello Vlad,

I am having the same issue as page52. I have custom images for each page, but they default back to the non-custom image for every page when it goes mobile. Is there a way to specify the same custom image for something like . .header-image-mobile?

Thanks!

Does entering a custom CSS mean we have to edit this file?

style.css

Hi guys
Another way to do is using a plugin. And works on mobile.
Its possible to have a different header for a specific page.

I use a plugin called “Unique Headers”

It’s very good and easy to use. I have a specific header for many of my pages.

Got it. Works. I’m using the plugin SiteOrigin CSS Plugin to get this done. Thanks for all your help

Hey everyone, thank you so much! This helped a lot.

Hi,

I tried this on a website we are currently working on, using a Sydney Child Theme. Here’s my code:

.page-id-806 .header-image{
background-image: url(‘https://thoroughhealthcare.co.uk/wp-content/uploads/2020/08/ppe-shop-header.jpg’);
}

However, it does not appear to work. This is the page in question - https://thoroughhealthcare.co.uk/shop/

I wondered if the fact that it is a child theme might be the issue? Or is it something else?

For info I tried it on some other pages - but no luck!

Thanks!

Robin