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

A propriedade CSS background-origin define a área de posicionamento do plano de fundo, isto é, a ponto de origem de uma imagem específica usando a propriedade background-image.

Note que background-origin é ignorado quando background-attachment é fixed.

Nota:  A taquigrafia background redefine o valor desta propriedade para seu valor inicial se esta não foi específicada.

Sintaxe

/* Valores chave */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

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

A propriedade background-origin é especificada por uma chave de valores listadas abaixo.

Valores

border-box
O plano de fundo é posicionado relativamente nas bordas do elemento.
padding-box
O plano de fundo é posicionado relativamente no espaçamento do elemento.
content-box
O plano de fundo é posicionado relativamente para o conteúdo do elemento.

Sintaxe formal

<box>#

where
<box> = border-box | padding-box | content-box

Exemplos

.exemplo {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
}
#exemplo2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
}
div {
  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

Especificações

Especificação Status Comentário
CSS Backgrounds and Borders Module Level 3
The definition of 'background-origin' in that specification.
Candidata a Recomendação Initial definition.

Initial valuepadding-box
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Compatibilidade de navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1
Full support 1
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Full support 12Firefox Full support 4
Full support 4
Full support 49
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
No support 1 — 4
Prefixed Notes
Prefixed Requires the vendor prefix: -moz-
Notes Used the -moz-background-clip: padding | border syntax.
IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.
Opera Full support 10.5
Full support 10.5
Full support 15
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari Full support 3
Full support 3
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
WebView Android Full support 4.1
Full support 4.1
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Chrome Android Full support Yes
Full support Yes
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Mobile Full support YesFirefox Android Full support 14
Full support 14
Full support 49
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Opera Android Full support 12.1
Full support 12.1
Full support 14
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari iOS Full support Yes
Full support Yes
Full support Yes
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Samsung Internet Android Full support Yes
content-boxChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
Opera Full support 10.5Safari Full support 3WebView Android Full support 4.1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 12.1Safari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Veja também

Etiquetas do documento e colaboradores

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