HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [96]
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Background with no-repeat
The background-repeat attribute can be set to one of four values:
♦ repeat: The default value; the image is repeated indefinitely in both x- and y-axes.
♦ no-repeat: Displays the image one time; no repeat in x- or y-axis.
♦ repeat-x: Repeats the image horizontally but not vertically.
♦ repeat-y: Repeats the image vertically but not horizontally.
Making effective gradients with repeat-x and repeat-y
Gradients are images that smoothly flow from one color to another. They can have multiple colors, but simplicity is a virtue here. The repeat-x and repeat-y techniques discussed in the previous section can be combined with a special image to create a nice gradient background image that’s very quick to download. Figure 4-13 shows an example of this technique.
Figure 4-13: The page appears to have a large background image.
Even though the entire page is covered in a background image, I made the actual background quite small. The outlined area in Figure 4-13 is the actual image used in the background (displayed with an img tag and a border). You can see that the image used is very short (5 pixels tall). I used background-repeat: y to make this image repeat as many times as necessary to fill the height of the page.
The code is pretty straightforward:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Using a thin gradient background
Here’s the actual gradient height:
alt = ”blue gradient” />
Here’s how you make a gradient background:
1. Obtain or create a gradient image.
Most image editing tools can make gradient fills easily. In GIMP, you simply select the gradient tool, choose an appropriate foreground and background color, and apply the gradient to the image.
2. Set the image size.
If you want your image to tile vertically (as I did), you’ll want to make it very short (5 px) and very wide (I chose 1,600 px, so it would fill nearly any browser).
3. Apply the image as the background image of the body or of any other element, using the background-image attribute.
4. Set the background-repeat attribute to repeat-x to make the image repeat as many times as necessary vertically.
Use a vertical gradient image if you prefer. If you want to have a color that appears to change down the page, create a tall, skinny gradient and set background-repeat to repeat-x.
The great thing about this technique is how it uses a relatively small image to fill a large Web site. It looks good, but it’ll still download reasonably fast.
Using Images in Lists
It’s not quite a background, but you can also use images for list items. Sometimes, you might want some type of special bullet for your lists, as shown in Figure 4-14.
Figure 4-14:
I can’t get enough of those Arrivivi Gusanos.
On this page, I’ve listed some of my (many) favorite varieties of peppers. For this kind of list, a custom pepper bullet is just the thing. Of course, CSS is the answer: