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

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

Valores

Valor	Descrição
`border-box`	A imagem de fundo se estenderá sob a borda.
`padding-box`	A imagem de fundo não se estenderá sob a borda.
`content-box`	A imagem de fundo ficará apenas sobre o conteúdo.

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:

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

#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:

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

#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:

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

#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:

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

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

Veja também

a propriedade background-clip,
que define a posição tanto da imagem de fundo quanto do preenchimento
a propriedade background,
que representa uma propriedade abreviada para o fundo