Sela Hero Image Crops Height

  • I have a hero image that measures 5400×1253. When I make it my Header Image it gets cropped down and the result is that I have a header image that is way to short.

    Ive tried adding to the CSS Editor, but this does not work
    .hero-content > img {
    height: 100%;
    }

    I’ve used different images, and they all get cropped into a very short hero or header image. I’m looking for a much larger, full size image like the one in the template.

    I’m a bit new here, so forgive any missteps.

    Cheers,
    -eric

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi Eric,

    Can you please set your larger image as the header image so I can take a look?

    This theme recommends an image that is 1180px wide by 610px high, and when the image is loaded from your media library the theme resizes the image itself by adding size query parameters directly to the URL. What that means is, even if we were to use CSS to make the image container bigger, the image itself is only 1180x610px big as far as your browser is concerned, even if the file in the media library is much bigger.

    So we could make the container bigger and then make the image bigger using CSS, but that will result in the image being stretched, leading to loss of quality.

    You’d use something like this:

    .hero-content {
  height: 700px;
}
.hero-content img {
  height: 700px;
}

    If the image you’re trying to use is also being cropped, that’s being done in the same way, so the file that actually loads in your browser does not even contain the missing pieces of the image, as those are cropped out before the image even loads. To prevent that you’d need to edit the theme’s PHP code itself, and that’s not something we can help with here.

Viewing 1 replies (of 1 total)
  • The topic ‘Sela Hero Image Crops Height’ is closed to new replies.