Extensible HyperText Markup Language

XHTML.com recommends: PSD to HTML Slicing Service and PSD to HTML by W3 Markup. see your link here

background-position

Definition

The background-position property specifies the position of a background image. If only one percentage or length value is given, it is applied to the horizontal position, and the vertical value will be 50%. If two values are given, the horizontal position is assumed to be the first one. Combinations of keyword, length and percentage values are allowed, (e.g., 50% 2cm or center 2cm or center 10%). For logical reasons, when using combinations of keyword and non-keyword values, left and right may only be used for the first value, and top and bottom may only be used for the second value.

Example

  1. a.external {
  2. padding-right: 16px;
  3. background-image: url('images/arrow.gif');
  4. background-repeat: no-repeat;
  5. background-position: right;
  6. }

Characteristics

Possible values

percentage percentage

The first value is the horizontal position, and second value is the vertical position. The values 0% 0% represent the upper-left corner position, just inside the element's border. 100% 100% represents the bottom-right corner, just inside the element's border. The following illustration shows percentage values and the positions they represent in the CSS box model:

Illustration of a CSS box model. Three arrows point to possitions 0% 0%, 65% 32% and 100% 100%.

Below is a screen shot of a Web browser rendering a background image at 65% 32%:

Screen shot of a Web browser with an element that has a background image at 65% 32%.

percentage
Horizontal position of the background image. The vertical value will be 50%.
length length
The first value is the horizontal position, and second value is the vertical position relative to the upper left corner just inside the element's border.
length
Horizontal position of the background image. The vertical value will be 50%.
top left
Same as 0% 0%.
left top
Same as 0% 0%.
top
Same as 50% 0%.
top center
Same as 50% 0%.
center top
Same as 50% 0%.
right top
Same as 100% 0%.
top right
Same as 100% 0%.
left
Same as 0% 50%.
left center
Same as 0% 50%.
center left
Same as 0% 50%.
center
Same as 50% 50%.
center center
Same as 50% 50%.
right
Same as 100% 50%.
right center
Same as 100% 50%.
center right
Same as 100% 50%.
bottom left
Same as 0% 100%.
left bottom
Same as 0% 100%.
bottom
Same as 50% 100%.
bottom center
Same as 50% 100%.
center bottom
Same as 50% 100%.
bottom right
Same as 100% 100%.
right bottom
Same as 100% 100%.
inherit
Use the same computed value as the parent element for this property.

Default value

0% 0%

Applies to

Inherited

No

See also