Propriedade background-origin

A propriedade background-origin define como a imagem de fundo (especificamente a imagem, não o preenchimento) será posicionada em relação ao elemento: parte da imagem de fundo irá se estender sob a borda, o fundo não irá se estender sob a borda ou o fundo será posicionado apenas sobre o conteúdo do elemento (ou seja, o padding afastará o fundo).

Sintaxe

cssseletor {
  background-origin: padding-box | border-box | content-box;
}

Valores

Valor padrão: padding-box.

Observações

A propriedade background-origin não funciona quando background-attachment tem o valor fixed. Também quando background-repeat está com o valor repeat, a propriedade background-origin sempre funciona como com o valor border-box.

Exemplo . Padrão

Por padrão, o fundo não se estenderá sob a borda:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Exemplo . Valor border-box

Agora o fundo se estenderá sob a borda:

html<div id="elem"></div>

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Exemplo . Valor content-box

E agora o fundo será afastado pelo padding:

html<div id="elem"></div>

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Exemplo . Com background-repeat: repeat

Com background-repeat no valor repeat, a propriedade background-origin sempre funciona como com o valor border-box, ou seja, o fundo sempre se estende sob a borda:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

Veja também