Vlastnosť background-origin

Vlastnosť background-origin určuje, ako sa bude obrázok pozadia (konkrétne obrázok, nie výplň) umiestňovať vzhľadom na prvok: časť obrázka pozadia bude prenikať pod okraj, pozadie nebude prenikať pod okraj alebo pozadie bude umiestnené len nad obsahom prvku (to znamená, že padding odtlačí pozadie).

Syntax

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

Hodnoty

Hodnota	Popis
`border-box`	Obrázok pozadia prenikne pod okraj.
`padding-box`	Obrázok pozadia nebude prenikať pod okraj.
`content-box`	Obrázok pozadia bude len nad obsahom.

Predvolená hodnota: padding-box.

Poznámky

Vlastnosť background-origin nefunguje, keď background-attachment má hodnotu fixed. Tiež pri background-repeat s hodnotou repeat vlastnosť background-origin vždy funguje ako pri hodnote border-box.

Príklad . Predvolené

Predvolene pozadie nebude prenikať 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;
}

Príklad . Hodnota border-box

Teraz pozadie prenikne 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;
}

Príklad . Hodnota content-box

A teraz sa pozadie odsune cez 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;
}

Príklad . Pri background-repeat: repeat

Pri background-repeat s hodnotou repeat vlastnosť background-origin vždy funguje, ako pri hodnote border-box, to znamená, že pozadie vždy preniká 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;
}

Pozrite tiež

vlastnosť background-clip,
ktorá určuje pozíciu obrázka pozadia aj výplne
vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie