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.
top right
bottom left
top center
The order of these keywords doesn’t matter, since there’s no possibility for confusion. A missing value is assumed to be center.
center top
bottom
The missing value is assumed to be center
You can also give a length in pixels. Horizontal first, then vertical.
50px 15px
15px 50px
You can mix it with keywords, but still horizontal first, then vertical.
75px top
top 75px
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.
50% 0%
Same as center top
75% 75%
Better try it yourself. background-position:
0% 0%
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.
background-position-x: right
background-position-x: 75%
background-position-y: bottom
background-position-y: 75%