object-fit is supported in more browsers using background images is going to continue to be important part of creating responsive designs.
background-position property of an element is a useful way to make sure that the important part of an image is displayed no matter what size of device your user is on.
I've always known that you can set this background position using keywords
top, bottom, left, right, center. These keywords will suffice in many contexts, but occasionally there is a need for more granular control of the background-position.
Setting background position as a percentage
Did you know that you can also set the background position as a percentage value or a length value as well? This comes in very useful when your subject in an image is center-left or somewhere that the keywords don't quite pinpoint.
This will position the background at 10% from the left and 50% from the top of its container. This is equivalent to
background-position: 10% 50%;
background-position: 25% 75%;
Positions the center of your image 25% from the left and 75% from the top of its container.
Setting background position as a length
You can also set background position as a specific length.
background-position: 10px 25px;
background-position: 2em 3em;
You can also use negative numbers in background-position property. For example if you wanted to offset the image negatively into the corner you could use something like
background-position: -5px -5px;
Mixing position types
You can also mix these properties and use a percentage with a keyword or length etc.
background-position: 15% center;