CSS 2.1 Reference: background-position Property

The background-position property is used to specify the initial position of the background image.

If only one value is specified then the other value is assumed to be the keyword center.

This property is specified by using percentage, length, and keyword values according to the syntax shown above. If a percentage or length is used, then the first value represents the horizontal position and the second value the vertical position. Negative values are permitted for both percentage and length values.

• Percentage alignment.
  • When using a percentage for horizontal alignment, the percentage value applies both to the image and the background area. If 20% is specified then the 20% horizontal point on the image will line up with the 20% horizontal point on the background area. If 0% is specified then the left side of the image will line up with the left side of the background area. If 100% is specified then the right side of the image will line up with the right side of the background area.
  • When using a percentage for vertical alignment, the percentage value applies both to the image and the background area. If 20% is specified then the 20% vertical point on the image will line up with the 20% vertical point on the background area. If 0% is specified then the top of the image will line up with the top of the background area. If 100% is specified then the bottom of the image will line up with the bottom of the background area.

• Length alignment.
  • When using a length for horizontal alignment, the left side of the image will be placed the specified length from the left side of the background area. If 10px is specified then the left side of the image will be located 10 pixels to the right of the of the background area's left edge. If 0px is specified then the left side of the image will line up with the left side of the background area.
  • When using a length for vertical alignment, the top of the image will be placed the specified length from the top of the background area. If 10px is specified then the top of the image will be located 10 pixels down from the top edge of the background area. If 0px is specified then the top of the image will line up with the top of the background area.

CSS Example: The background-position property is set using a keyword for the horizontal position and a percentage for the vertical position.

body {background-position: right 25%;
    background-image: url("../images/floatingball.gif");
    background-repeat: no-repeat;
    background-color: yellow;
  }

CSS Example: The background-position property is set using only a single keyword for the vertical position. The horizontal position will default to the keyword "center."

body {background-position: bottom;
    background-image: url("../images/floatingball.gif");
    background-repeat: no-repeat;
    background-color: yellow;
  }

CSS Example: The background-position property is set using a length for the horizontal and vertical position.

body {background-position: 50px 20px;
    background-image: url("../images/floatingball.gif");
    background-repeat: no-repeat;
    background-color: yellow;
  }

CSS Example: The background-position property is set to the top left corner using keywords for the horizontal and vertical position. The image is set to repeat.

body {background-position: left top;
    background-image: url("../images/floatingball.gif");
    background-repeat: repeat;
    background-color: yellow;
  }

• bottom - Vertical image position. Aligns the bottom of the image with the bottom of the background area.
• center - Horizontal or vertical image position.
  • When used for horizontal positioning, center aligns the horizontal center of the image with the horizontal center of the background area.
  • When used for vertical positioning, center aligns the vertical center of the image with the vertical center of the background area.
• left - Horizontal image position. Aligns the left side of the image with the left side of the background area.
• right - Horizontal image position. Aligns the right side of the image with the right side of the background area.
• top - Vertical image position. Aligns the top of the image with the top of the background area.
• inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.