Change CSS code to alter header size

• 

  bojanakragulj · Member · Sep 22, 2015 at 7:51 pm

  • Copy link
  • Add topic to favorites

  Can any kind soul out there help me change the CSS code to make it so that the header image takes up less of the page?

  Our ideal is that one would see more or most of the front page when entering the site. Currently, the image takes up so much space that a lot of scrolling is necessary.

  Thank you!

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

• 

  thesacredpath · Member · Sep 23, 2015 at 8:40 am

  • Copy link

  Hi, we can do this, but due to the mottled nature of the background on your header image, it is difficult to make the background blend in around the image. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.

  .has-custom-header-image #header-image, .has-custom-header-image #header-image img {
      max-height: 300px;
      width: auto;
      background: #F3EFEB;
  }

• 

  thesacredpath · Member · Sep 23, 2015 at 8:40 am

  • Copy link

  You can adjust the max-height value as you desire in the above.

• 

  bojanakragulj · Member · Sep 23, 2015 at 5:47 pm

  • Copy link

  Hello thesacredpath,

  Thanks so much for your great response. I had success! Now, however, I want to use another image, and would prefer that image stretch across the page.

  Can you take a look again?

  http://www.tandemmetals.wordpress.com

  I appreciate your help so much!

• 

  thesacredpath · Member · Sep 23, 2015 at 11:26 pm

  • Copy link

  To have the new header image full width, remove the previous CSS rule I gave and it will go back to full width.