The Background-Position Property

The background-position property lets you override the default position of an image and specify the image's initial position, whether it's a single image or an image that is repeated.

Name:	background-position
Value:	<percentage> | <length> ]{1,2} | [ top | center | bottom] | | [ left | center | right ]
Initial:	0 0
Applies to:	all elements
Inherited:	no
Percentages:	refer to the size of the element itself

Essentially, you can set the position of a background image in one of three ways:

• Percentages

• Absolute positions

• Keywords

Placing Images Using Percentages

When you place an image using percentages, you tell the browser where the background image is relative to the size of the element.

Here's an example of how this works. Suppose you have an element, and you want to place an image in that element. Assume the element is BODY and your percentage values are 20% and 60%, written as a rule like this:

 BODY {   background-position: 20% 60%;   background-image: url(tile.png) } 

First, you locate the upper-left corner of the element and the upper-left corner of the image. From there, find the point in BODY that is 20% across and 60% down. Next, find the point in the image that is 20% across the image and 60% down the image. Finally, you put the image in the element and match the points.

Positioning images using percentages makes it easy to specify some common positions. For example, to center an image in an element, you would write simply 50% and to place an image against the right edge of the element requires simply 100%. (See also Figure 10.10.)

If the background image is fixed (see the background-attachment property), the position is not calculated relative to the element, but relative to the window.

Placing Images Using Absolute Positions

When you give two length values instead of two percentages, the upper-left corner of the image will be that far away from the upper-left corner of the element. For example:

 BLOCKQUOTE {   background-image: url(shape.png);   background-position: 1cm 5mm } 

puts the background image shape.png at 1cm from the left and 5mm from the top of the element.

As with percentages, if you give only one value, the image is centered vertically. That is, a value of 1cm is equivalent to 1cm 50%.

Negative values are possible, if you want to put the image partially outside the element. Only the part that is inside the element will be visible, however.

Placing Images Using Keywords

When placing an image using keywords, you use any combination of two keywords. One of three keywords top, center, and bottom represents the horizontal (x-axis) dimension. One of three keywords left, center, and right represents the vertical (y-axis) dimension.

You cannot combine keywords with percentage values or absolute values.

Figure 10.9 shows the nine positions you can indicate with the keywords, and in parentheses the equivalent percentage values. The order in which you list the keywords in your code doesn't matter. For example, top left produces the same result as left top. This is not the case, however, when using percentages. The order in which you give the percentages makes a big difference in the result. For example, in the previous example in which we explained how to use percentages, we chose 20% and 60% as our values. Reversing the values to 60% and 20% in our code produces a different effect than that shown in Figure 10.9.

Figure 10.9. The most common combinations of background-position keywords and their percentage equivalents and effects obtained.

If you specify only one dimension, say, top, the unspecified dimension is assumed to be center. Hence, the rule

 BODY { background: url(banner.jpeg) top } 

produces the same effect as

 BODY { background: url(banner.jpeg) top center }