Spring Into HTML and CSS

Positioning a Background Graphic

Along with tiling, you can position a background graphic into the document or any element you like. To position a background graphic, you have to set the background-repeat value to no-repeat first. Then you can position it using any one of the values described in Table 8-1.

Table 8-1. Background Position Property Values

Value Type	Example	Placement
Percentage	background-position: 0% 0%;	Top-left corner
	background-position: 100% 100%;	Bottom-right corner
	background-position: 14% 80%;	14% across, 80% down
Length	background-position: 20px 20px;	20px from left, 20px down
Keywords	background-position: top left;
	background-position: left top;	0% 0%
	background-position: ...