DevGuru CSS2: background-position

Quick References

Features

Partners

PROPERTY: background-position

background-position : [ percentage | length ] |
[ [ top | center | bottom ] &| [ left | center | right ] ]

Compatibility: IE4+ N6
Version: Level 1
Inherited: No

The background-position property allows you to determine the initial position of a background image.

You can use any combination of a percentage or a length. Alternately, you can use one of the keywords [top, center, bottom] and/or one of the keywords [left, right, center] to define the position. You cannot mix the keywords with percentage or length.

[ percentage &| length ]

The percentage value is usually listed as a pair of values. Place a blank (white) space between the pair of percents. The first percentage in the pair refers to the horizontal axis and the second percentage to the vertical axis. 0% 0% is defined as the left top corner and 100% 100% as the right bottom corner. If you only give one percentage, it will only set the horizontal axis and the vertical axis is defaulted to 50%.

Other examples of percentage pairs:

% Pair	Position
0% 50%	left center
50% 0%	center top
50% 50%	center
0% 100%	left bottom corner
100% 0%	right top corner
50% 100%	center bottom
100% 50%	right center

The length value can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	cm
ems	em
inches	in
millimeters	mm
picas	pc
pixels	px
points	pt

Like the percentage pair, you usually use a pair of length values The first length in the pair refers to the horizontal axis and the second length to the vertical axis. The (0,0) position is defined as the top left corner. If you only give one length, it will only set the horizontal axis and the vertical axis is defaulted to 50%.

[ top | center | bottom ] &| [ left | center | right ]

Instead of the length or the percentage values , you can use keyword values to set the position. Again, you usually use a pair of keywords. If you only use one keyword, the second value of the pair is defaulted to center. Note that the order of the pair of keyword values is not important. Thus, top center top, and top center are equivalent and define the same image position. You cannot mix keyword values, such as top, with percentage or length values.

Code:
img {
background: url("images/aardvark.gif");
background-position: 35% 80%;
}

menu {
background: url("images/aardvark.gif");
background-position: 35% 2.5cm;
}

a {
background: url("images/aardvark.gif");
background-position: 3.25in;
}

body {
background: url("images/aardvark.gif");
background-position: top right;
}

Output:
Click to see example in separate window