Hide header image in some pages

Hi, I have a couple of doubts that I can’t figure out:
1st question - Is it possible to hide the header or change its image but only for some pages? My new pages get by default the same image that the Homepage.
2nd question - How to remove the rounded corners of the header image?
Thanks a lot

Hi! You can remove the “hero image” from the category pages, and show a simple color instead of that, with this code:

.header-hero.header-hero--cover.hp-listing-category.hp-listing-category--view-page.header-hero--large.header-hero--cover{background-color:#555D86;
background-image:none;}

select any rgb, or hex color code, and replace this: #555D86 you can select color code from here: https://html-color.codes/
the second code: “background-image:none;” will hide the image, and show the background color, what you selected.

Second option: if you want to change the background image, here is it. Using this code, you can replace your categories banner image:

.header-hero.header-hero--cover.hp-listing-category.hp-listing-category--view-page.header-hero--large.header-hero--cover{
background-image: url(https://yourwebsite.com/wp-content/uploads/yourimagename.jpg);
}

this can be any image, from your media library, or external url.
Don’t use both codes at the same time! The second one will overwrite the first…
I use the ListingHive theme, and my header image is not rounded, but if you can’t how to do that, you cannot do so simple.

Put this first or second code into additional CSS section of your theme (I recommend child theme). And don’t forget to change the sample image url to your real.

1 Like

Comment for myself :smiley: I didn’t see you use rentalhive, so this code maybe not working for you. If not, just delete. Anyway, this code maybe needed later for somebody.

Thank you. Anyway I tried, but as you say your solution is valid only for category pages.
I was asking about the static pages like Homepage, About us, Privacy policies and so on, because I find better to see different header images on every page.

Hi again! With this code, you can set a custom header image for each pages, posts. Just find your page ID. How? Take a look here: How to find the page ID in WordPress in a few steps

.page-id-639 .header-hero--cover{background-color:#555D86;
background-image:none;}

in this sample, change the id number to your page id. This code will remove the image, and replace it to color.

.page-id-639 .header-hero--cover{background-image: url(https://yourwebsite.com/wp-content/uploads/yourimagename.jpg);
}

With this second code, you can set a custom header image, for your selected page or post.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.