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).
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 to use custom graphics for bullets in lists, to name a couple. (You'll see the bullet example in action in the tutorial on Using Graphics for Bulleted Lists.) 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 (Giving the Sidebar Personality).
repeat-x repeats an image horizontally along the x-axis (the horizontal width of the page, if your geometry is 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 Adding an Image to the Page Background 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).
