CSS code for changing the header image

• 

  bellenesia · Member · Sep 6, 2017 at 8:36 pm

  • Copy link
  • Add topic to favorites

  What is the CSS code for adding different header images on pages? Does the code go in “Customization”, CSS?

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

• 

  thesacredpath · Member · Sep 7, 2017 at 1:02 am

  • Copy link

  Hi there, we can do this. The following is for your Services page. I randomly pulled an image from your Media Library for the example.

  .page-id-87 .custom-header-media .wp-custom-header img {
    visibility: hidden;
  }
  .page-id-87 .custom-header-media {
    background: url('https://bellenesia.files.wordpress.com/2017/08/cropped-digital-camera-349873_1280.jpg') no-repeat scroll center top / cover;
  }

  To do this on a page-by-page basis, you need to use the unique page id CSS class from the opening body html tag for the particular page. In this case it is 87. You can find that using the Web Inspector built into your browser.

• 

  bellenesia · Member · Sep 7, 2017 at 2:08 am

  • Copy link

  Thank you so much it worked, you are a life saver.

• 

  thesacredpath · Member · Sep 7, 2017 at 2:37 am

  • Copy link

  Hooray and you are welcome!