Making header image of a page/post a smaller height

• 

  blakehudson23 · Member · Jun 29, 2018 at 3:07 pm

  • Copy link
  • Add topic to favorites

  I like how the header picture is on some pages, but on others (like “case study materials”) the image is far too tall (I want readers to be able to see info on the page sooner without having to scroll down). How can I reduce the height of the header image? Thanks!

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

• 

  khristiansnyder · Staff · Jun 29, 2018 at 8:51 pm

  • Copy link

  Hello!

  The easiest way will be to crop that image to the height that you would like it. Here is some more info on how to edit an image you already have uploaded: https://en.support.wordpress.com/images/editing-an-image/

  Additionally, this code will reduce the height of all header images and keep the aspect ratio. It will crop out part of the image so that can be adjusted with the Object-Position percentages. This example restricts the header images to be 400 pixels max in height.

  .attachment-organization-featured-large {
      object-fit: cover;
      object-position: 0% 100%;
      height: 400px;
  }

  Hope that helps!

  -Khristian

• 

  gemmacevans · Member · Jun 30, 2018 at 9:45 am

  • Copy link

  Hi blakehudson23,

  If you need any further help with the CSS @khristiansnyder provided, you are welcome to reply here or start a new chat using this link:

  https://wordpress.com/help/contact/

  
  @khristiansnyder — thanks for your help!