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.