Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade CSS background-position define a posição inicial, relativa a posição de fundo na camada definido por background-origin, para cada background image definifo.

Sintaxe

/* Valores chave */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* Valores <percentuais> */
background-position: 25% 75%;

/* valores <espessura> */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiplas imagens */
background-position: 0 0, center;

/* Valores de cantos relativos */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Valores globais */
background-position: inherit;
background-position: initial;
background-position: unset;

A propriedade background-position é especificada como um determinado numero de valores de <position> , separados por espaços.

Values

<position>
A <position>. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one or two values. If two values are used, 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.

1-value syntax: the value may be:

  • The keyword value center, which centers the image.
  • One of the keyword values 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.
  • A <length> or <percentage>. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

2-value syntax: one value defines X and the other defines Y. Each value may be:

  • 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.

Formal syntax

<bg-position>#

where
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]

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

Examples

Each of these three examples uses the background property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.

HTML

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

CSS

/* Shared among all <div>s */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* These examples use the `background` shorthand property */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/* Multiple background images: Each image is matched with the
   corresponding position, from first specified to last. */
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

Result

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-position' in that specification.
Candidata a Recomendação Adds support for multiple backgrounds and the four-value syntax. Modifies the percentage definition to match implementations.
CSS Level 2 (Revision 1)
The definition of 'background-position' in that specification.
Recomendação Allows for keyword values and <length> and <percentage> values to be mixed.
CSS Level 1
The definition of 'background-position' in that specification.
Recomendação Initial definition.

Initial value0% 0%
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Percentagesrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
Midiavisual
Computed valuea list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
Animation typerepeatable list of simple list of length, percentage, or calc
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Multiple backgroundsChrome Full support 1Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 10.5Safari Full support 1.3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Four-value syntax (support for offsets from any edge)Chrome Full support 25Edge Full support 12Firefox Full support 13IE Full support 9Opera Full support 10.5Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Quantum CSS notes

  • Gecko has a bug meaning that background-position can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57) fixes this.

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: brunoaugustosilva
Última atualização por: brunoaugustosilva,