show images w/o cropping

[Joseph Jaramillo]

Hey I need to show the hero image w/o cropping. Do I need to set my image to a specific ratio or dimension? Please advise and thanks!

[Bill Robbins]

Good question Joseph. You can do that. Here’s how:

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

   
   body.image #hero-section,
   body.gallery #hero-section {
   	background-size: contain;
   	background-repeat: no-repeat;
   	background-color: #000000;
   }
   

3. Update your settings.

That will force all of the background image to be visible always. Since screen aspect ratios vary so much, you'll want to set a background color in case it letterboxes. It's set to black above, but you can use any color you want there.

If you'd like to only apply that to one page/post, I would suggest using the Art Direction plugin. It's a bit older, but still works. It adds a new box to your page editor that allows you add styling that will only be visible on that page/post.

[Author]

Posts