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

Lesson 6. Adding Background Images > Adding background-position

Adding background-position

Now that the background image is repeating correctly, it must be positioned down the right edge of the <body> element. This is achieved using background-position.

Values for the background-position property include percentage (such as 0 100%), length (such as 2px 20px), and keywords (such as left top). In each case, the horizontal position is specified first, and then the vertical position. The values 0% 0% will position the upper-left corner of the image in the upper-left corner of the box’s padding edge. Values of 0 100% will position the bottom-left corner of the image in the bottom-left corner of the box’s padding edge. Values of 2px 20px will position the top-left corner of the image 2px in from the left edge of the box and 20px down from the top of the box.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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