CSS: the background-position property

Understanding how the background-position works in CSS is crucial to develop more complex techniques, such as rounded corners with images, CSS sprites and multiple backgrounds. In this post I'm going to explain how this property works in details.

X and Y coordinates

The syntax of the background-position property is as follows:

background-position: x y;

It accepts two values which represent the x and y axes. These axes, horizontal and vertical, specifies the coordinates to exactly position a background image. These coordinates start from the top left corner of the box having a background image.

Coordinate values

You can specify either a length or a keyword for both the values of the x and y coordinates. Lengths include:

1. em
2. pixels
3. percentages

Keywords include:

1. top
2. bottom
3. left
4. right
5. center

The following table maps keywords to their corresponding percentage equivalent:

Keywords and percentages

Keywords	Percentages
top left	0 0
center top	50% 0
top right	100% 0
top center	0 50%
center center	50% 50%
right center	100% 50%
top bottom	0 100%
center bottom	50% 100%
right bottom	100% 100%

You can see how this work in the following picture:

As of CSS 2.1, you can combine lengths with keywords. However, Internet Explorer 6 doesn't support it.

Negative values

The offset of a background image is calculated as follows:

• the x value moves the image from left to right
• the y value moves the image from top to bottom

This is the default behavior of the background-position property. However, you can reverse this behavior by specifying negative values. So:

• a negative x value moves the image from right to left
• a negative y value moves the image from bottom to top

For example:

a.sprite {
 background: url(sprites.png) no-repeat 0 0;
}
a.sprite:hover {
 background-position: 0 -25px;
}

In the above example, we have the CSS sprites technique. If our sprite image is 50 pixels tall and both the sub-images are 25 pixels tall, then a negative value for the y axis will move the second sub-image to the top, thus creating a rollover effect.