CSS Offset cover background image - css

Question

I have the following background using background-size: cover and I'd like to offset it a bit to the left.
.landing {
display: flex;
padding: 2rem 4.5rem;
height: 100vh;
width: 100vw;
background-image: url('~assets/img/background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
If I use cover, I can't offset my image so I tried doing
.landing {
background-size: 110%;
background-position: right 10% center;
}
But I end up with white space on top and bottom of my image because it doesn't expand to respect image's aspect ratio (the height is set to auto).
Without using cover, how can I set the right background-size percentage to avoid whitespaces on top/bottom of the image on any screen size and keeping aspect ratio?

Answer 1

To get the background shifted slightly to the left but still completely filling you could put it on a before pseudo element, then you have a lot of control over dimensions and positioning without affecting the main element.
Here's an example where we want to move the background so the person is 30px to the left. The pseudo element is given a width + 30px but translated 30px to the left.
.landing, .landing:before {
position: relative;
display: flex;
padding: 2rem 4.5rem;
height: 100vh;
overflow: hidden;
}
.landing {
position: relative;
display: flex;
width: 100vw;
}
.landing:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(100vw + 30px);
transform: translate(-30px);
background-image: url('https://picsum.photos/id/1049/1024/768');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
}
<div class="landing"></div>
Note: a bit more sophisticated arithmetic is needed to do it in terms of % (given the % width of the pseudo element is more than the original)!