Web Design in a Nutshell, 3rd Edition

Keyword positioning

The keyword values for positioning are left, right, top, bottom, and center. Each value (except center) places the specified edge of the image all the way to the respective edge of the element. For example, the left value pushes the left edge of the image all the way to the left edge of the background area. The center value places the center of the image in the center of the element. And so on.

Keywords are usually used in pairs, as in these examples:

    {background-position: left top;}
    {background-position: right center;}
    {background-position: center bottom;}

Each of these positions is demonstrated in Figure 20-7.

The order of the keywords is not important according to the CSS 2 Recommendation, but Netscape 6 and related browsers require that the horizontal measurement be provided first, so it’s good practice to provide them in horizontal/vertical order just to be safe.

Figure 20-7. Positioning with keywords

If you only provide one keyword, the missing keyword is assumed to be center. Therefore the second and third previous examples could also be written like this:

    {background-position: right;}
    {background-position: bottom;}