Css/Properties/background-position

From W3C Wiki

background-position

The background-position property specifies its initial position.

Description

Values [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
Initial value 0% 0%
Applies to All elements
Inherited No


Point, Note

  • Typically, the values of this property are specified two values. The first value represents the horizontal position and the second represents the vertical position.
  • If only one value is specified, the second value is assumed to be 'center'.


Values

  • <percentage>


  • <length>


  • top
    Equivalent to 0% for the vertical position.


  • right
    Equivalent to 100% for the horizontal position.


  • bottom
    Equivalent to 100% for the vertical position.


  • left
    Equivalent to 0% for the horizontal position.


  • center
    Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is.


  • inherit


Example

Example A

[style.css]

 body {
   background-image: url("images/bg.png");
   background-position: bottom right;
   background-attachment: fixed;
   background-repeat: no-repeat;
 }

Example B

[style.css]

 body {
   background-image: url("images/bg.png");
   background-position: 100% 100%;
   background-attachment: fixed;
   background-repeat: no-repeat;
 }


CSS Reference

The CSS specification defines the background-image property in 14.2.1 Background properties.