CSS background image offset + contain doesn't take the whole width

Issue

I have an image that was provided to me, it has a width of 2400px and a height of 1000px

In the exact middle of this image is a red ball. Now the requirement is so that I use this image as a background image for a header, and that the red ball is positioned a bit to the right of the center.

My header is 100% width and has a height of 450px. When I put the background position to center center then it's completely centered, as expected. So I need a bit of an offset, which I did using the calc() function, but that gives me an 80px gap on the left side.

This is the code I used:

.header {
  background-image: url('../img/header.jpg');
  background-repeat: no-repeat;
  background-position: calc(50% + 80px) 50%;
  background-size: contain;
  height: 450px;
}

So what I am trying to achieve: the image should still be covering the whole header (unless you have a viewport wider than 2400px, but that's a different matter altogether) but it should be positioned a bit to the right, while ideally keeping it responsive. Is this possible and if yes, any idea how to move forward?

Solution

You could make the background image 160px (= two times 80px) wider than 100% to compensate for the missing 80px / the gap on the left side. But of course, then you can't use contain anymore - however, that won't be possible anyway with the requirements you have

.header {
  background-image: url('../img/header.jpg');
  background-repeat: no-repeat;
  background-position: calc(50% + 80px) 50%;
  background-size: calc(100% + 160px) auto;
  height: 450px;
}

Answered By - Johannes