#Introduction

The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

#Examples

css-apisrc/background-position/App.tsx

Preview

#Syntax

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0px 0px;
background-position: 1rem 2rem;
background-position: 10em 8em;

/* Multiple images */
background-position:
  0px 0px,
  center;

#Values

• 1-value syntax

  • Keyword center, which centers the image.
  • Keyword top, left, bottom, right. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.
  • <length> or <percentage>. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

• 2-value syntax

  • One of the keyword values top, left, bottom, right. If left or right are given here, then this defines X and the other given value defines Y. If top or bottom are given, then this defines Y and the other value defines X.
  • A <length> or <percentage>. If the other value is left or right, then this value defines Y, relative to the top edge. If the other value is top or bottom, then this value defines X, relative to the left edge. If both values are <length> or <percentage> values, then the first defines X and the second Y.
  • Note that: If one value is top or bottom, then the other value may not be top or bottom. If one value is left or right, then the other value may not be left or right. This means, e.g., that top top and left right are not valid.

• Default value

  • left top or 0% 0%

#Formal definition

#Formal Syntax

[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]

<length-percentage> = <length> | <percentage>

#Difference between web

• Not support Global Value like inherit、initial and unset.
• Not support Edge offsets syntax like:

background-position: bottom 10px right 20px

#Compatibility