CSS background-position Property

Description

The background-position property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

Initial value: 0% 0%
Applies to: All elements
Inherited: No
Media: Visual
Computed value: A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
Animatable: Yes
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.backgroundPosition

Syntax

background-position: <position> [ , <position> ]*

Values

topComputes to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.
rightComputes to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.
bottomComputes to '100%' for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.
leftComputes to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.
centerComputes to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is.
<length>A length value gives a fixed length as the offset. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area.
<percentage>A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by 'background-size'.

Example

HTML

<div style="height:1000px"> </div>

CSS

body { 
   background-image: url(images/icon1.png), url(images/icon2.png); 
   background-repeat: repeat-y, repeat-y; 
   background-position: left, right; 
}

Result