HTML and CSS

Positioning a Background Graphic

Along with tiling, you can position a background graphic into the document or any element you like. To position a background graphic, you have to set the background-repeat value to no-repeat first. Then you can position it using any one of the values described in Table 8-1.

Table 8-1. Background Position Property Values

Value Type

Example

Placement

Percentage

background-position: 0% 0%;

Top-left corner

background-position: 100% 100%;

Bottom-right corner

background-position: 14% 80%;

14% across, 80% down

Length

background-position: 20px 20px;

20px from left, 20px down

Keywords

background-position: top left;

background-position: left top;

0% 0%

background-position: top center;

background-position: center top;

50% 0%

background-position: right top;

background-position: top right;

100% 0%

background-position: left;

background-position: left center;

background-position: center left;

0% 50%

background-position: center;

background-position: center center;

50% 50%

background-position: right;

background-position: right center;

background-position: center right;

100% 50%

background-position: bottom left;

background-position: left bottom;

0% 100%

background-position: bottom;

background-position: bottom center;

background-position: center bottom;

50% 100%

background-position: right bottom;

background-position: bottom right;

100% 100%


Confused yet? So was I, until I started playing around with positioning backgrounds. The important thing to remember is that for percentage and length values, the first value is the horizontal value and the second is the vertical value. With keywords, the behavior is as described in the table.

NOTE

You can combine percentages and length values with background-position but not keywords, so you can have a value of 100% 20px but you cannot have a value of 100% left.

If only one percentage or length value is given, it is applied to the horizontal position, and the vertical position defaults to 50%.


Example 8-5 sets up the style sheet for a sample of each value type.

Example 8-5. Positioning a background graphic with percentage, length, and keywords
h1 {background-image: url(tile.gif); background-repeat: no-repeat; background-position: 0%
 0%;}
h2 {background-image: url(tile.gif); background-repeat: no-repeat; background-position:
 100px 4px;}
h3 {background-image: url(tile.gif); background-repeat: no-repeat; background-position:
 bottom right;}

Note that I've defined not only the image, but also the repeat value of no-repeat, to ensure that the background-positioning values work properly. Figure 8-10 serves up the resulting background graphic positions.

Figure 8-10. The small gray-lined tile being positioned within the background of header elements.

by BrainBellupdated
Advertisement: