crop image to left edge when screen size is reduced

Question

I have a block with a background image. When the screen width is reduced and the picture does not fit, it is always cropped to the right.

Is it possible to make it so that when the width decreases, the image is cropped not on the right edge, but on the left?

.bg-image {
    background-image: url("https://i.imgur.com/wKF7rWc.png");
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
}

<div class="bg-image"><div>

Answer 1

Add background-position: right; to right-align the background image inside its div

.bg-image {
    background-image: url("https://i.imgur.com/wKF7rWc.png");
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

<div class="bg-image"><div>