Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith
background-color:#ffbd75;
background-image:url(pics/turq_spiral.png);
background-position: center;
background-repeat:no-repeat;
background: url(pics/blue_triangle.png)
#ffbd75 repeat-x;
repeat-x
makes the tile repeat horizontally only.background: url(pics/blue_triangle.png)
#ffbd75 repeat-y;
repeat-y
makes the tile repeat vertically only.background: url(pics/blue_triangle.png)
#ffbd75 no-repeat center center;
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;
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;