removing header image from individual pages

• 

  michaelshawbond · Member · May 12, 2014 at 11:49 am

  • Copy link
  • Add topic to favorites

  Is there a way to remove the header image on individual pages? I’m using the Illustratr theme, and the header image on the home page appears on all other pages (presumably that’s the default for this theme). I’d like to remove the header image for some of the pages, or replace it – any clues how to do that with CSS upgrade?

  Many thanks. The website I’m working on is michaelshawbond.wordpress.com

  Michael

  The blog I need help with is: (visible only to logged in users)

• 

  colorfultones · Member · May 12, 2014 at 7:33 pm

  • Copy link

  The Illustratr theme utilizes Featured Images for the header image. You should be able to override any/all header images by setting a Featured Image.

• 

  thesacredpath · Member · May 13, 2014 at 4:48 am

  • Copy link

  If you go to the page you want to remove a header image from and view the source code (view menu in browser or use web inspector built into your browser), and look in the opening body tag, you will fine a unique body page class that will look something like this: page-id-3 (your about page). To hide the image on that page, you would create a CSS selector that specifically targets that page such as below (using your about page as an example).

  .page-id-3 .site-image img {
      display: none;
  }

  If you wish to use separate images on different pages, do as @colorfultones suggests and set a featured image for each page you on which you wish to have a different header image.

• 

  michaelshawbond · Member · May 13, 2014 at 12:45 pm

  • Copy link

  Many thanks for your help both, this has fixed it.

• 

  thesacredpath · Member · May 13, 2014 at 10:22 pm

  • Copy link

  You are welcome.