HTML and CSS Reference
In-Depth Information
Table 8-2. Keywords and Percentage Values for the background-position Property
Percentage Equivalent
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.
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.
Search WWH ::

Custom Search