CSS Cookbook

2.6. Placing a Background Image

Problem

You want to position a background image in a web page.

Solution

Use the background-position property to set the location of the background image. To place an image that starts 75 pixels to the right and 150 pixels below the upper-left corner of the viewport (see Figure 2-11), use the following CSS rule:

body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-position: 75px 150px;        
}

Figure 2-11. The background placed precisely 75 pixels from the right and 150 pixels from the upper left corner of browser’s viewport

Discussion

The background-position element contains two values separated by a space. The first value of the pair sets the origin point along the y axis, while the second value sets the point on the x axis. If only one value is given, that value is used for the horizontal position and the vertical position is set to 50%.

The Solution used pixel units to determine the placement of the background image; however, you also can use percentages. A value of 50% for background-position means that the browser places the image in the dead center of the viewport, as shown in Figure 2-12, while the values 0% and 100% place the image in the upper left and lower right corner, respectively.

Figure 2-12. The background image centered ...