HTML and CSS Reference
In-Depth Information
You may specify one or two values for the
background-position
property.
If you use a single value, it applies to both the vertical and horizontal
positions. With two values, the first is the horizontal offset and the
second is the vertical offset.
Length values (with their appropriate units; see
section 8.4.1.2
, earlier
in this chapter) indicate an absolute distance from the upper-left corner
of the element behind which you display the background image. Negat-
ive length values effectively crop the corresponding top and left sides of
the image within the allotted viewport, just as an image that is too big
for the browser's window gets cropped on the bottom and right sides.
For example:
table {background-image: url(backgrounds/marble.gif);
background-position: 10px 20px}
offsets the marble background 10 pixels to the right and 20 pixels down
from the upper-left corner of any
<table>
element in your document.
Percentage values are a bit trickier but somewhat easier to use. Meas-
ured from 0 percent to 100 percent from left to right and top to bottom,
the center of the element's content display space is at 50%, 50%. Simil-
arly, the position one-third of the way across the area and two-thirds of
the way down is at 33%, 66%. So, to offset the background for our ex-
ample dinner menu to the center of the element's content display space,
we use:
[*]
[*]
Interestingly, this property worked as advertised with Internet Explorer versions 4 and 5 but is broken
in version 6, as it is with other popular browsers: the offset works only if you set the
background-re-
peat
property.
background-position: 50%
Why use a number when a single word will do? You can use the
keywords
left, center
, and
right
, as well as
top, center
, and
bottom
,
