CSS/Properties/background-position

From Web Education Community Group
Jump to: navigation, search

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'. [Example C]


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
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

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

[index.html]

  <body>
    <p>This is a paragraph</p>
  </body>

Csslist2 background-position.png

Example B

[style.css]

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

[index.html]

  <body>
    <p>This is a paragraph</p>
  </body>

Csslist2 background-position.png

Example C

[style.css]

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

[index.html]

  <body>
    <p>This is a paragraph</p>
  </body>

Csslist2 background-position2.png

CSS Reference

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