Back to the index.
This page tests background-position. How do we position the background? Top-left is the default, but there are other exciting possibilities.
All test boxes on this page have
background-repeat: no-repeat in order to make the tests clearer.
There are three horizontal keywords: left, center, and right. There are three vertical keywords: top, center, and bottom.
The order of these keywords doesn’t matter, since there’s no possibility for confusion. A missing value is assumed to be center.
The missing value is assumed to be center
You can also give a length in pixels. Horizontal first, then vertical.
You can mix it with keywords, but still horizontal first, then vertical.
This one should not work
Finally, you can define the position in percentages. Again horizontal first, then vertical.
Unfortunately percentages are tricky: if you say
75% 50% that means that the point 75% to the right and 50% to the bottom of the image is placed on 75% to the right and 50% to the bottom of the element.
So 0%, 50% and 100% work as you’d expect; you need to get used to the other values.
Same as center top
Better try it yourself.
Inspired by this CSS Tricks article, we have to test the following syntax that is supposed to position the background image 20px from the right and 10px from the bottom:
right 20px bottom 10px;
Two properties for setting only the x or y position.