Header Image Cropping

  • Resolved rebadler

    (@rebadler)


    5 years, 3 months ago

    I want to use the slider as the main element at the top of a page, but still want to have a not-too-tall header image at the top of the page. I created a thin header image (1500 pixels wide by 94 pixels tall) for the header image area, only I cannot get the full image to display. When I select the image for the header slot, I must choose the Crop option. (There is no Skip Crop option as there is when I select other, larger header images.) The crop feature will only let me select a very small section of the full image. I cannot get past this Crop function to allow the system to accept this image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for using Startup Blog!

    That is a good point. I can change the Header Image feature in the next update to allow cropping to be skipped.

    A temporary solution you can try is to add some whitespace below your graphic so that the image is 1500 x 450 pixels with the top 94px including the image. Upload that to your site and then add this CSS:

    .header-image {
	object-fit: cover;
	height: 94px;
}

    You can add that code into the Additional CSS section in the Customizer and it will crop the image so that only the top 94px are visible.

    Thread Starter rebadler

    (@rebadler)

    Thank you! I added an additional property (object-position), and that seems to work OK.

    Theme Author Ben Sibley

    (@bensibley)

    Glad to hear that! Let me know if you need anything else.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Image Cropping’ is closed to new replies.