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.