Właściwość background-origin

Właściwość background-origin określa, jak obrazek tła (konkretnie obrazek, a nie wypełnienie) będzie pozycjonowany względem elementu: część obrazka tła będzie zachodzić pod obramowanie, tło nie będzie zachodzić pod obramowanie lub tło będzie pozycjonowane tylko nad zawartością elementu (czyli padding odsunie tło).

Składnia

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

Wartości

Wartość	Opis
`border-box`	Obrazek tła będzie zachodzić pod obramowanie.
`padding-box`	Obrazek tła nie będzie zachodzić pod obramowanie.
`content-box`	Obrazek tła będzie tylko nad zawartością.

Wartość domyślna: padding-box.

Uwagi

Właściwość background-origin nie działa, gdy background-attachment ma wartość fixed. Również gdy background-repeat ma wartość repeat, właściwość background-origin zawsze działa jak przy wartości border-box.

Przykład . Domyślnie

Domyślnie tło nie będzie zachodzić pod obramowanie:

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

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

Przykład . Wartość border-box

Teraz tło będzie zachodzić pod obramowanie:

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

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

Przykład . Wartość content-box

A teraz tło zostanie odsunięte przez 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;
}

Przykład . Przy background-repeat: repeat

Przy background-repeat ustawionym na repeat właściwość background-origin zawsze działa jak przy wartości border-box, czyli tło zawsze zachodzi pod obramowanie:

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

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

Zobacz też

właściwość background-clip,
która określa pozycję zarówno obrazka tła, jak i wypełnienia
właściwość background,
która jest właściwością-skórczeniem dla tła