O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Positioning 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 4-6), use the following CSS rule:

html {
 height: 100%;
}
body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-position: 75px 150px;
}
The background, placed precisely 75 pixels from the right and 150 pixels from the upper-left corner of the browser’s viewport

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

Discussion

The background-position property contains two values separated by a space. The first value of the pair sets the origin point along the y-axis, and 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 the browser places the image in the dead center of the viewport, as shown in Figure 4-7; the values 0% and 100% place the image in the upper-left and lower-right corners, respectively.

The background image centered in the browser window

Figure 4-7. The background image centered in the browser window

Along with percentages, you can use the values top, center, and bottom for the y-axis and left, center, and right for the x-axis. Using combinations of these values, you can place the background image at eight points around the edges of the viewport (in the corners and in between), as well as in the middle of the viewport. For example, to re-create the value of 50% in Figure 4-7, you can use this CSS rule instead:

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

To place a background image in the lower-right corner, as shown in Figure 4-8, you can use the following CSS rule:

body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-position: bottom right;
}
The background image placed in the lower-right corner

Figure 4-8. The background image placed in the lower-right corner

You also can use the background-position and background-repeat properties for background images that tile but aren’t chained to the sides of the viewport.

See Also

Creating a Stationary Background Image for setting an image so that it doesn’t scroll; the CSS 2.1 specification for background-position at http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required