Preserve visibility of given image edge while using background-size: cover;

Question

I have a full-width banner image with a specified height, so when the browser window is resized the edges are clipped. Background-size: cover; clips both the left and right sides of the image equally as the browser window size reduces. This is a problem for this particular image because the portion I want to be seen at all times is on the left edge. I would like to preserve the visibility of the left edge and allow all of the clipping to happen on the right edge. How could I achieve this?

Here is the CSS I'm currently using:

.hero-image {
    background-image: 
    url("https://cdn.shopify.com/s/files/1/0101/7148/2178/files/Classic- 
    Banner1_2048x2048.jpg?v=1570802031");
    height: 250px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

Here is the full bit of code I'm working on:

https://www.w3schools.com/code/tryit.asp?filename=G9FSC6Y7YH1B

Drag the divider to the left to maximize the viewport window and you'll see why I don't want the left-hand side to be cropped.

Thanks in advance!

Answer 1

You can use background-position: left

Credit to Tenmani Afif