custom header image for each page

• 

  mjk1450 · Member · Jan 20, 2015 at 8:05 pm

  • Copy link
  • Add topic to favorites

  I found on the forum an answer on how to get a specific header image for each page. Thesacredpath suggested the following css.

  .page-id-79 .header-image {
  background: url(“URL_OF_IMAGE”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  }
  .page-id-79 .header-image img {
  visibility: hidden;
  }

  This works fine but the bottom portion of my images get cropped. The size of my images are 1015 x 279. Without this css, the images are set to randomly rotate and it does so without any problem. So why does it only crop the image when I place this css in?

  I am using Misty Lake theme.

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

• 

  mjk1450 · Member · Jan 20, 2015 at 11:07 pm

  • Copy link

  I found another posting with a similar question and thesacredpath replied back with a slightly different code. The following css works without any issues.

  .page-id-42 .header-image img {
  visibility: hidden;
  }
  .page-id-42 .header-image {
  background: url(“URL_OF_IMAGE”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  background-size: contain;
  }

• 

  timethief · Member · Jan 20, 2015 at 11:08 pm

  • Copy link

  Thanks for letting us know you resolved this. Happy blogging. :)