can be achieved in Windows by right-clicking the desktop, choosing Properties,
clicking the desktop tab, and then selecting one of the textures — such as Soap
Bubbles — from the list. However, your own textures are pretty much guaran-
teed to be superior to those supplied with Windows.
Here’s an example illustrating how to tile a texture file named pebbleusing
the repeatvalue of the background property:
<html>
<head>
<style>
body {background: white url(“pebble.jpg”) repeat;}
h2 {background: url(“coin.jpg”) no-repeat left top;
color: blue;
width: 85%;
padding: 30px;
font: bold 48px “Arial Black”;
letter-spacing: -.02em;
word-spacing: -.16em;
line-height:48px;
}
</style>
</head>
<body>
<h2>Coins of the Realm</h2>
<h2>European and Asian Available Now!</h2>
</body>
</html>
You can set backgrounds for the entire page (in the <body>element), or for
individual elements such as Heading 2 (H2) illustrated in the code above. The
ability to add graphics or textures behind any visual element via CSS is quite
useful to Web designers.
Notice that a photo of a coin is included as part of the definition of the H2 ele-
ment, so it appears at the top left of each H2. However, additional properties
such as widthand padding define the spacing of the headline, and spacing
properties are used to tighten the headline text.
Even with the spacing adjustments, though, the lettering available via CSS is
relatively crude and one-dimensional. Figure 7-17 illustrates how you can use
drop shadowing with text in a graphics application to give the page a natural
dimensionality: a raised 3D look. Most people would agree that the lettering in
Figure 7-17 is more attractive than the simpler, plainer lettering in Figure 7-16.
144 Part II: Looking Good with CSS
