CSS: The Missing Manual

Controlling Repetition

One problem with the old HTML background attribute is that the graphic always tiles, filling up the entire background of a Web page. (Not only that, it's being phased out from current HTML standards.) Fortunately, CSS gives you far greater control. Using the background-repeat property you can specify how (or if at all) an image tiles:

 
background-repeat: no-repeat;

The property accepts four values: repeat, no-repeat, repeat-x, and repeat-y:

• repeat is the normal setting for background images that you want to display from left to right and top to bottom until the entire space is filled with a graphic (Figure 8-3).

  

  Figure 8-3. Be careful when tiling images in the background of a Web page. Choose an image without a lot of contrast that tiles seamlessly (left). An image with too much contrast (right), makes text hard to read.

• no-repeat displays the image a single time, without tiling or repetition. It's a very common option, and you'll frequently use it when placing images into the background of tags other than the body. You can use it to place a logo in the upper corner of a page or for using custom graphics for bullets in lists, to name a couple. (You'll see the bullet example in action in the tutorial in Section 8.7.3.) In another example, you'll use it at the top of a <div> tag to create a rounded edge at the top of a box (Section 8.7.4).

• repeat-x repeats ...