We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support111242 39410.531
content-box112429510.531
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4.1 Yes Yes1412.1 Yes Yes
content-box4.1 Yes Yes1412.1 Yes Yes

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

2. Firefox supported, from version 1 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. Since Firefox 49, also supports the -webkit prefixed version of the property.

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

5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.

Veja também

Etiquetas do documento e colaboradores

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