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:
