Hero image crop adjustment

There are several plugins that can help you modify how wordpress crops images. My personal preference is (obviously) WP SmartCrop (https://www.wpsmartcrop.com). It lets you choose a “focal point” in your image (such as a face), and generates all thumbnails in such a way as to try to keep that point close to a rule of thirds position in the image, to give you a clean, well-composed crop.

If you get really fancy, WP SmartCrop also supports CSS softcropping, which can let you set rules for how the image should be sized on any screen size, and it will create your cropped images on the fly, to optimize for every screen.

I’m referring to the hero BG image and the ‘cover’ CSS associated with it.

It’s unpredictable where it will crop on different screen sizes.

Check out greenless.com and look at the hero on the homepage. Adjust the screen size in your browser and scale it in to phone size and you’ll see what I mean.

I just want a way to tell it to align to the vertical & horizontal center.

background-position: center center; will tell an element with background-size:cover; to crop relative to the center of the image. By changing the background position property’s value, you can tell it to crop to different positions.

it’s still a bit janky as those values don’t map to the image center for any value other than center but with enough breakpoints, it will do the trick.

That helped a ton on my home page hero. Now I just need to figure out what is so different about the other pages. Off to a great start, though. ??

I ended up using

background-position: top center !important;

and it looks great.