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