HTML and CSS Reference
In-Depth Information
Table 8-2.
Keywords and Percentage Values for the background-position Property
Keyword
Percentage Equivalent
left
0%
center
50%
right
100%
top
0%
bottom
100%
he
center
keyword applies to both the horizontal and vertical axes.
In CSS2.1,
background-position
expects one or two values, whereas the CSS3 syntax accepts up to four
values. Not all browsers support the CSS3 syntax. So, to avoid confusion, I'll concentrate first on the CSS2.1
syntax, which works in any browser.
CSS2.1 Syntax
he
background-position
property expects one or two values.
center
or
50%
.
•
If you use one value, the other value is automatically set to
•
If you use two keywords, the horizontal and vertical values can be in either order.
•
If you use any other combination of two values, the first one must specify the horizontal
offset and the second one the vertical offset.
■
When using two values, make a habit of always putting them in the order: horizontal, vertical. Although
specifying
background-position
as
top right
is valid,
0% right
is not.
Tip
Using lengths is straightforward. If you specify
background-position
as
30px 50px
, the top-left corner of
the background image is placed
30px
horizontally and
50px
vertically from the top left of the element. Negative
values move the top left of the image in the opposite direction, effectively cutting it of.
Keywords are also intuitive. Specifying
right top
positions the top-right corner of the image at the top right
of the element. Specifying
center
positions the center of the image at the center of the element.
However, percentages are calculated not only in relation to the background, but also in relation to the image
itself. That's why the percentage equivalent of
right
is
100%
. It's not only
100%
of the background width, but also
100%
of the image width. This applies to all percentages. For example, if you specify
background-position
as
30%
80%
, it locates the point at
30%
of the image's width and
80%
of its height at
30%
of the background width and
80%
of
its height.
To illustrate how this works, I have created position_percent.html, which uses the HTML5
<canvas>
element
and JavaScript to draw a grid. Each vertical and horizontal line represents
10%
of the element's width and height.
The background image, checker.png, is a 10 × 10 checkerboard, so each block represents 10 percent of its width or
height. The styles set its
background-position
to
30% 80%
.
As Figure
8-12
shows, the third vertical line of the canvas sits exactly between the third and fourth horizontal
blocks of the checkerboard, and the eighth horizontal line of the canvas is between the eighth and ninth vertical
blocks of the checkerboard.
