Adding background-position

Adding `background-position`

Now that the background image is repeating correctly, it must be positioned down the right edge of the <body> element. This is achieved using background-position.

Values for the background-position property include percentage (such as 0 100%), length (such as 2px 20px), and keywords (such as left top). In each case, the horizontal position is specified first, and then the vertical position. The values 0% 0% will position the upper-left corner of the image in the upper-left corner of the box's padding edge. Values of 0 100% will position the bottom-left corner of the image in the bottom-left corner of the box's padding edge. Values of 2px 20px will position the top-left corner of the image 2px in from the left edge of the box and 20px down from the top of the box.

If only one percentage or length value is given, it sets the horizontal position only and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed (such as 50% 2cm). Negative positions are also allowed (such as 20px 10px).

For this lesson, you will use percentage values of 100% 0, which will place the image in the right and top of the element. The code is shown in Listing 6.5.

The image will now repeat down the right edge of the <body> element (see Figure 6.3).

Figure 6.3. Screenshot of `<body>` element styled with `background-position`.

Background Position Issues

Some browsers do not recognize the background-position keyword value right. However, all modern browsers support the percentage value of 100%, so this value can be used instead.

Listing 6.5. CSS Code Styling the `<body>` Element with `background-position`

body {     background-image: url(chapter6.jpg);     background-repeat: repeat-y;     background-position: 100% 0; }