I often use divs and background images on a constant basis to get a modern look and feel to a website. When doing so it is important to know the CSS shortcuts for the element background-position.There are two basic ways of writing this in your stylesheet, 1.with Keywords and 2. with Percentages or Lengths.

Keywords

• Horizontal keywords: left, center, right
• Vertical keywords: top, center, bottom

For example to place an image in the top right hand corner you would write the following:

• #header {background: url(/images/header.jpg) top right no-repeat;}

Percentages and lengths can also be used as a positioning technique. I would recommend using percentages over lengths due to varying screen resolutions. Percentages position the image relative to the element with which it is contained. When writing the code for this technique remember that the horizontal position is declared first.

Percentages and/or Lengths

• top left = left top = 0% 0%
• top = top center = center top = 50% 0%
• right top = top right = 100% 0%
• left = left center = center left = 0% 50%
• center = center center = 50% 50%
• right = right center = center right = 100% 50%
• bottom left = left bottom = 0% 100%
• bottom = bottom center = center bottom = 50% 100%
• bottom right = right bottom = 100% 100%

For example to place an image in the top right hand corner using percentages you would write the following:

• #header {background: url(/images/header.jpg) 100% 0% no-repeat;}

Note: If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 100% -5px is permitted. However, percentages and lengths cannot be combined with keywords.