Unaltered, the coin photo’s background would create a small square behind
the coin — covering the background texture. So, in a graphics program, I
copied the pebble texture, and then poured it into the small photo’s back-
ground around the coin. This way, the coin blends into the Web page back-
ground. In addition, I added a drop-shadow to the coin photo. One goal when
designing eye-catching graphics is to make the page look less flat. If your
entire design is two-dimensional, with no overlapping elements and no shad-
owing, you’re not exploiting all the possible design tools at your disposal.
Besides the traditional x (horizontal) and y (vertical) axes, think about the z
axis (the third dimension), where objects stack on top of each other and cast
shadows.When you load a graphic in as your background, as in Figure 7-18, you can
have the image only cover part of the background, and the rest of the back-
ground filled in via a tiled texture. If both textures are identical, as they are in
Figure 7-17, the viewer cannot tell where the image ends and the tiled texture
background begins.If you do include a background image, you may want to display hyperlinks,
labels, or other elements on top of the image. This can easily be done by
specifying some absolute positioning. (If you just add the text or other ele-
ment in the HTML without specifying positioning, the element appears below
the bottom of the image on the page.)Figure 7-16:
The
background
was created
in a
graphics
program,
but the text
is pure CSS.