Home › Forums › Free Themes › Travel Insight › How to change header image of individual categories

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 7, 2018 at 11:08 am #86664
    janansiam
    Participant

    Hello,

    I’d like to change the header for each category and I cannot figure out how to get this done. Any help would be appreciated. To be specific, I’d like each category to have a different header (I do know how to change the overall header in the customize section). Thank you!

    December 10, 2018 at 12:32 am #86762
    wensolutions
    Keymaster

    Hello @janansiam,

    To change the header in category page add below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    body[class*="category"] #banner-image {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding-bottom: 55%;
}

body[class*="category"] #banner-image img {
	display: none;
}

.category-73 #banner-image {
	background-image: url('https://cms-assets.tutsplus.com/uploads/users/1500/posts/31260/image/summer_nature_background_with_green_grass_and_butterfly_and_blue_sky.jpg');
}

    For above given CSS, you have to replace the category ID with your category ID. Similarly, for other category add the same CSS which is :

    .category-73 #banner-image {
	background-image: url('https://cms-assets.tutsplus.com/uploads/users/1500/posts/31260/image/summer_nature_background_with_green_grass_and_butterfly_and_blue_sky.jpg');
}

    But with replacing the category ID.

    You can find the category ID either by inspecting or from the backend.

    Screenshot:

    https://prnt.sc/lswsym

    Hope this helps.

    Regards!!

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.