CSS2 » Properties » background-position

Version: Level 1

Compability:  IE4+  N6

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

The background-position property allows you to determine the initial position of a background image. This property is not inherited.

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.

Examples

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;
}
Language(s): CSS2

See Also: