/

HTML / CSS / JavaScript Tutorial

CSS Property: background-position

[this page | pdf | back links]

The CSS (CSS1) background-position property sets the (starting) position of a background image. By default, a background-image is placed at the top-left corner of an element and is repeated both vertically and horizontally.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

value

See below

x% y%

Horizontal position and vertical position as fraction of size of element. Top left is 0% 0%, bottom right is 100% 100%. If you only specify one value then the other will be 50%.

xpos ypos

(e.g. 0px 0px). Horizontal position and vertical position in any valid CSS length. You can mix % and positions

 

Default Value:

0% 0%

JavaScript syntax:

e.g. object.style.backgroundPosition="10% 20%"

Inherited:

No

Animatable:

Yes

 

Other acceptable values include combinations of left, center, right (for xpos) and top, center, bottom (for ypos). If you only specify one keyword then the other value will be center.

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile