Featured Image on Home Page Cropped Horiz

[Samuel]

Hi Bill:
I’ve got a Home page with a featured image which was originally 2400×1200. My problem is that at the top of Home page where it displays, the image is truncated horizontally left and right. I’ve since experimented with resizing it down to 760×380 and of course it’s still 2:1 ratio and is still truncated. Is it an issue of the image always trying to fill the vertical space to a specific dimension? If so, then what is the optimum ratio for such images? Or is there something else going on here.

[Bill Robbins]

Samuel,

Sorry for the trouble there. The theme is set up to have the hero image completely fill the top portion the browser window. But in order to do that without skewing the image at all, it will crop the left and right hand sides off on some browser sizes.

If you do need to always have the hero image completely visible, you can do that. Here’s how:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   body.image #hero-section,
   body.gallery #hero-section {
   	background-color: #000;
   	background-size: contain;
   	background-repeat: no-repeat;
   	background-position: center top;
   }
   

3. Update your settings.

That will cause the entire image to be scaled down so that all of it will always be visible. The trade off is depending on the size and aspect ratio of the browser being used to view the site, there could be some space between the hero image and the content below it.

If you run into any questions or trouble, let me know.

Thanks,
Bill

[Samuel]

Hi Bill
Perfect, that worked great. And as expected, there are black bars top & bottom. I know that it’s screen and browser specific, but just for future reference, is there a suggested aspect ratio that would fill the vertical space and minimize horizontal cutoff?

[Bill Robbins]

That’s really pretty tough due to the wide variety of screen sizes out there. Even on an iPad, switching from landscape to portrait gives a completely different aspect ratio and it’s on the same device.

You might try making it somewhat square. For tall windows, the more rectangular, the more empty space there will be. I haven’t tried that, but it might be worth a shot so shoot for something more like 2000 pixels wide by 1800 pixels tall or so. You may need to experiment with that number just a bit to find a happy medium.

Have a great weekend,
Bill

[Samuel]

I think you’re right re: a more square format to minimize the wasted space after the image and before the following content. Thanks Bill for the CSS fix, and for the quick response.

Cheers

[Bill Robbins]

Thanks for letting me know how that turned out. That’ll help if someone else wants to do the same thing.

Take care

[Author]

Posts