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).

    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.

    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 ...

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.