• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 8. Working with Color and Images... > Positioning a Background Graphic

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 TypeExamplePlacement
Percentagebackground-position: 0% 0%;Top-left corner
 background-position: 100% 100%;Bottom-right corner
 background-position: 14% 80%;14% across, 80% down
Lengthbackground-position: 20px 20px;20px from left, 20px down
Keywordsbackground-position: top left; 
 background-position: left top;0% 0%
 background-position: top center; 
 background-position: center top;50% 0%
 background-position: right top; 
 background-position: top right;100% 0%
 background-position: left; 
 background-position: left center; 
 background-position: center left;0% 50%
 background-position: center; 
 background-position: center center;50% 50%
 background-position: right; 
 background-position: right center; 
 background-position: center right;100% 50%
 background-position: bottom left; 
 background-position: left bottom;0% 100%
 background-position: bottom; 
 background-position: bottom center; 
 background-position: center bottom;50% 100%
 background-position: right bottom; 
 background-position: bottom right;100% 100%



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint