How to center an specific (x,y) point of a background image to a defined (x',y') coordinates of the CSS element that contains it? - css

Question

I have read that in order to place a background image inside a container block in CSS you can use the background-position property. And you can give labels to it like, top-right-bottom-left-center or css units, mostly percents. And the way it acts is kind of like this:
background-position: 25% 25%, will place the (25%,25%) point of the background image from the top-right edge centered to the (25%,25%) point of the CSS element that contains that background.
So if I would like to center the (50% 50%) point of the background image to the (0,0) point of the container, how can I achieve it?
I know I can do it with pseudo elements (:before, :after) but is there a math calculation that can help me use the background property to make this work? Unfortunately I haven't found a property like a registry point that could allow me to place the point I would like use as my center for the background (background-origin despite the close meaning it is used for something completely different as I discovered).
This question is in regards to any situation but as an example I'm sharing a quick and simple snippet to make it more graphical.
By the way, I'm trying to find the most responsive solution I could. It will be much better if we can assume that I don't know the exact dimensions of the background image so that if I later change that image for another of different size, it stays centered to the same place. This means I prefer % over px.
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: url('https://source.unsplash.com/random/200x200') no-repeat, blue
}
<! -- Let's supose I would like to center the (50%, 50%) of that image placeholder at the (0,0) of the container div. -- >
<div class='foo'></div>
Thanks in advance

Answer 1

Since you know the size of the background image (200x200), you can use half the amount of those pixel values as negative values for the background position in order to have the image's center exactly at the upper left corner of its div element. In your case, that would be background-position: -100px -100px;:
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: url('https://source.unsplash.com/random/200x200') no-repeat, blue;
background-position: -100px -100px;
}
<! -- Let's supose I would like to center the (50%, 50%) of that image placeholder at the (0,0) of the container div. -- >
<div class='foo'></div>
Second version: If you use a regular image instead of a background-image, you can use transform: translate(-50%, -50%); on it, and overflow: hidden on the parent. So that way using percentage values works.
However, in this case it becomes more complex to add content to the main div if you also need the background color for the rest of the container - You'd have to add an absolutely positioned element for that.
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: #bbf;
overflow: hidden;
position: relative;
}
.foo>img {
transform: translate(-50%, -50%);
}
.foocontent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class='foo'>
<img src="https://source.unsplash.com/random/200x200" />
<div class="foocontent">
Here's some text and even some more text to demonstrate how text content could be placed above the image that serves as a background here.
</div>
</div>

Answer 2

The percentage unit cannot be used to offset the background image because it defines the entire image point relative to its container.
What you can do is define the size and position of the image, which uses pixel units.
Use background shorthand:
background: url(img) -100px -150px / 200px 300px;
body {
background: url(https://images.unsplash.com/photo-1519940640025-75fdf32010d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80) -100px -150px / 200px 300px no-repeat pink;
}