HTML and CSS Reference
In-Depth Information
for
0%, 50%
, and
100%
, respectively. To center an image in the tag's con-
tent area, use:
background-position: center
[ ]
That is, if the browser supports the value units. So far, Internet Explorer and Netscape support only
a meager repertoire of length unitspixels and percents.
background-position: 1cm 50%
places the image one centimeter to the right of the tag's left edge,
centered vertically in the tag's area.
Note that with relative offsets, the image moves relative to the tag's
contents when the user resizes the browser display window because the
space allotted to the content also gets resized. By contrast, the image
stays in the same place relative to the element's contents if you use ab-
solute offset values.
Finally, one might also expect that the repeating background (by de-
fault; see the following
section, 8.4.5.5
) would tile down and to the right
of the offset. Not so. Current browsers "wrap" the image around to fill
the element's allotted display space. For example, look closely at
Fig-
ure 8-7
and notice the tiling effects for an offset versus nonoffset back-
ground image displayed from the following example style fragments:
<style type=css/text>
<!--
pre {background-image: url(backgrounds/vert.gif)}
pre.offset {background-image: url(backgrounds/vert.gif); background-position: -20px
-20px}
-->
</style>
