Until object-fit is supported in more browsers using background images is going to continue to be important part of creating responsive designs.

Setting the 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.

background-position: 10%;

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;