Cropping a responsive image to an off center point - css

Question

I'm not actually a front-end developer, but I've been asked to do the css for a responsive web-application. Mostly I've managed to piece everything together using getBootstrap and stackOverflow, but I've run into one issue that I've not been able to find a solution for.
Namely; the design calls for a responsive full-width background image across the top of the home page. Fixed-height, to be cropped when the page narrows.
No problem in itself, but the smaller-size design for the same page calls for this image to be cropped to a slightly off-center position, like so:
There's plenty of code samples on how to lock the image to the left of the page and have it crop from the right, or center the image and have it crop from both sides equally, but I can't for the life of me figure out a fluid way to have the image crop about 33% from the left and 66% from the right.
Is there a reliable way to do this, and/or would there be a clever workaround?

Answer 1

The key to this is the background-position property in combination with background-size: cover.
background-size: cover tells the browser that you want the image to expand to fill the available space, and let the extra parts of the image be cut off outside of your box.
So if you had a <div> with 200px width and 200px height and an image that was 1000px wide by 500px high then it would shrink down to 200px high and 400px wide.
The next question is how do you choose which parts of the image are shown and which aren't? That's where background-position comes in.
You can set this as something simple, like background-position: center center; which centers both vertically and horizontally and is often the desired outcome. For your situation though, you want to use something like this:
background-position: center left 33%;
This will make your image centered at larger screens and when there's more width than the container (e.g. <div>) needs then it'll move it to focus on 33% from the left.
Here's a full example:
HTML:
<div class="hero"></div>
CSS:
.hero {
height: 500px;
background-image: url("[your-image-url]");
background-size: cover;
background-position: center left 33%;
background-repeat: no-repeat;
}
Hope that makes sense. Here's a codepen showing it in action.