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

  • Initial value0% 0%
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueA 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
  • AnimatableYes
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.backgroundPosition
Formal syntax: <position> [ , <position> ]* 

background-position: right top;
background-position: 10% 20%;
background-position: 20px 50px;
<position> = [ [ left | center | right | top | bottom | <percentage> | <length> ]
  • 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'.
.class {
   background-image: url(/img/graphic.jpg);
   background-repeat: no-repeat;
   background-position: 30% 80%;
}

Click the button below to experiment with this property.

Give it a Try!

1+Firefox6+Explorer1+Chrome1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.