Section 8.3. Controlling Repetition

8.3. 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 an image horizontally along the x-axis (the horizontal width of the page, if your geometry's rusty). It's perfect for adding a graphical banner to the top of a Web page (Figure 8-4, left) or a decorative border along the top or bottom of a headline. (See Section 8.7.2 in the tutorial for an example of this effect.)

• repeat-y repeats an image vertically along the y-axis (the vertical length of the page). You can use this setting to add a graphic sidebar to a page (Figure 8-4, right) or to add a repeating drop shadow to either side of a page element (like a sidebar).