HTML and CSS [Electronic resources] نسخه متنی

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.

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.