Web Design in a Nutshell, 3rd Edition

By default, background images tile both horizontally and vertically. You can turn this behavior off and make the image appear just once by using the no-repeat keyword value as shown in Figure 20-4.

    div.ringo {background-image: url(starr.gif);background-repeat: no-repeat}

Figure 20-4. Turning off tiling with no-repeat

repeat-x allows the image to repeat only horizontally. Similarly, repeat-y allows the image to repeat only on the vertical axis. Examples of both are shown in Figure 20-5.

    div.horiz {background-image: url(starr.gif);background-repeat: repeat-x;}
    div.vert {background-image: url(starr.gif); background-repeat: repeat-y;}

Figure 20-5. Horizontal and vertical tiling

Notice that in the examples in Figure 20-4 and Figure 20-5, the tiling begins in the top-left corner of the viewing area (in most cases, the browser window). But the background image doesn’t necessarily need to start there, as discussed next.