Background Position

By default, the background image starts at the top left corner of its HTML element. This can be changed using the background-position property.

This property takes in two values like this: background-position: left center. The first value is for the horizontal and the second one is for the vertical position:

In the above code example, try changing the background-position value to center bottom or right center.

If only one value is specified, that will be for the horizontal and the vertical will be center by default:

Using keywords like left, top, center we can only position the background image to either the extreme ends or the center. For better control, we can use percentages, or pixels:

Change the background-position value to 100% 100% in the code example above and see what happens.