Vlastnost background-origin

Vlastnost background-origin určuje, jak se bude obrázek na pozadí (přesně obrázek, ne výplň) umisťovat vzhledem k prvku: část obrázku na pozadí bude zasahovat pod okraj, pozadí nebude zasahovat pod okraj nebo se pozadí bude umisťovat pouze nad obsahem prvku (tj. padding odtlačí pozadí).

Syntaxe

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

Hodnoty

Hodnota	Popis
`border-box`	Obrázek na pozadí zasáhne pod okraj.
`padding-box`	Obrázek na pozadí nebude zasahovat pod okraj.
`content-box`	Obrázek na pozadí bude pouze nad obsahem.

Výchozí hodnota: padding-box.

Poznámky

Vlastnost background-origin nefunguje, když background-attachment má hodnotu fixed. Také při background-repeat s hodnotou repeat vlastnost background-origin vždy funguje jako při hodnotě border-box.

Příklad . Výchozí nastavení

Ve výchozím nastavení pozadí nebude zasahovat pod okraj:

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

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

Příklad . Hodnota border-box

Nyní pozadí zasáhne pod okraj:

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

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

Příklad . Hodnota content-box

A nyní se pozadí odsune přes 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;
}

Příklad . Při background-repeat: repeat

Při background-repeat s hodnotou repeat vlastnost background-origin vždy funguje, jako při hodnotě border-box, tj. pozadí vždy zasahuje pod okraj:

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

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

Viz také

vlastnost background-clip,
která určuje pozici jak obrázku na pozadí, tak výplně
vlastnost background,
představující zkratkovou vlastnost pro pozadí