Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

222 LESSON 9: Using Images on Your Web Pages

As you can see, there’s only one background image in the upper-left corner of the <div>,

and the background color is showing through everywhere else.

What if you want the background image to appear somewhere other than the upper-left

corner? The background-position property enables you to position a background image

anywhere you like within its container.

The background-position property is a bit more complex than most you’ll see. You

can either pass in two percentages, or the horizontal position (left, right, center), or

the vertical position (top, bottom, center), or both the horizontal and vertical positions.

If you specify only one value, the default position (center) will be used for the other. If

you specify two values that can apply as the vertical or horizontal positions (a percent-

age, or center), the browser treats the first value as the horizontal setting and the second

as vertical.

Here are some valid settings for this property:

Upper right 100% 0%

top right

right top

Center 50% 50%

center center

50%

Bottom center 50% 100%

bottom center

center bottom

Here’s a tag that places the background centered 30% from the top of the <div>. You can

see the results in Figure 9.16.

<div style="background-image: url('black_rook.png');

height: 240px; width: 240px; border: 1px solid black;

background-color: #999; background-repeat: no-repeat;

background-position: center 30%;">

An element with a background.

</div>