These x/y coordinates are used for both the image and the parent element. In
other words, 100% 100%means the position is the lower right. So, the lower-
right corner of the image is positioned in the lower right corner of the parent
element. Values of 0% 0%locate the upper left corner of the image in the
upper left corner of the element. 50% 50% centers the image. Any variations
of those percentages put the image anywhere you want within the parent.
Where do you suppose 40% 60%would be located?
Here’s the code:
<html>
<head>
<style>
body {background-image: url(coin.jpg);background-repeat: no-
repeat; background-position: 40% 60%;}
</style>
</head>
<body>
</body>
</html>
This code results in the image you see in Figure 7-20.
Notice that the graphic in Figure 7-20 is not precisely 40 percent from the left
and 60 percent down from the top. That’s because the top-left of the graphic
is not the positioning point. Instead, the point is inside the graphic at its
40/60 coordinate.
Absolute positioning units (inches, px, and so on) can also be used to posi-
tion a background graphic, using the usual x y coordinate system (the first
value is the horizontal position, the second vertical). However, unlike with
percentages, the top-left corner of the image is the positioning point.
If you wish, you can supply negative percentages or absolute units, thereby
moving the image a bit off the element’s box. The following code moves the
coin image 20 pixels in both directions off the edge of the paragraph, as
shown in Figure 7-21:
<style>
p {font-size:32px; background-
image:url(lightcoin.jpg);background-repeat: no-
repeat; background-position: -20px -20px;}
</style>
150 Part II: Looking Good with CSS
