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

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%

From bottom or right

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;

background-position-x and -y

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%