background-position Property

The following layouts demonstrate how the background-position property works using both the keywords and coordinate points to locate the image within its display box.

Keywords

 
 
 

box 1: left top. box 2: center top. box 3: right top.

 
 
 

box 4: left center. box 5: center center. box 6: right center.

 
 
 

box 7: left bottom. box 8: center bottom. box 9: right bottom.

Coordinate Points (x y)

box 1: 20px 50px. box 2: 50px 20px. box 3: 40px -20px;. box 4: -40px 150px.