Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 2 • Backgrounds

Spiral

background-color:#ffbd75;
background-image:url(pics/turq_spiral.png);
background-position: center;
background-repeat:no-repeat;
Figure 12: Text in a nested element overlays its parent element's background color and a background image.
background: url(pics/blue_triangle.png) 
#ffbd75 repeat-x;
Figure 16: The keyword repeat-x makes the tile repeat horizontally only.
background: url(pics/blue_triangle.png) 
#ffbd75 repeat-y;
Figure 17: The keyword repeat-y makes the tile repeat vertically only.
background: url(pics/blue_triangle.png) 
#ffbd75 no-repeat center center;
Figure 18: The keyword no-repeat makes the tile display once only. The position keywords center and center center the type horizontally and vertically.
background: url(pics/blue_triangle.png) 
    #ffbd75 center center;
Figure 19: Without an explict repeat setting, border-repeat defaults to the keyword repeat, and the tiling occurs in both directions to fill the box.
url(pics/turq_spiral.png) -25px -5px no-repeat, 
url(pics/pink_spiral.png) 55px 0px no-repeat,
url(pics/gray_spiral.png) 60px -28px no-repeat #ffbd75;
Figure 20: Multiple background images can be added to an element.