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
Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information
|