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.