background-position

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.

Keywords

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

length

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

Percentages

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%