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

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  wensolutions 1 month, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #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!

    #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!!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.