background-origin

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 (en-US).

Experimente

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

css

/* 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

background-origin = 
  <box># (en-US)  

<box> = 
  border-box   | (en-US)
  padding-box  | (en-US)
  content-box

Exemplos

css

.exemplo {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}

css

#exemplo2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}

css

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 value	`padding-box`
Aplica-se a	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	não
Computed value	as specified
Animation type	a repeatable list

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também

background-clip