Die Eigenschaft background-origin

Die Eigenschaft background-origin legt fest, wie das Hintergrundbild (genau das Bild, nicht die Füllung) relativ zum Element positioniert wird: Ein Teil des Hintergrundbildes wird unter den Rahmen reichen, der Hintergrund wird nicht unter den Rahmen reichen oder der Hintergrund wird nur über dem Inhalt des Elements positioniert (das heißt, padding schiebt den Hintergrund weg).

Syntax

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

Werte

Wert	Beschreibung
`border-box`	Das Hintergrundbild reicht unter den Rahmen.
`padding-box`	Das Hintergrundbild wird nicht unter den Rahmen reichen.
`content-box`	Das Hintergrundbild befindet sich nur über dem Inhalt.

Standardwert: padding-box.

Anmerkungen

Die Eigenschaft background-origin funktioniert nicht, wenn background-attachment den Wert fixed hat. Auch bei background-repeat mit dem Wert repeat funktioniert die Eigenschaft background-origin immer wie mit dem Wert border-box.

Beispiel . Standardmäßig

Standardmäßig reicht der Hintergrund nicht unter den Rahmen:

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

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

Beispiel . Wert border-box

Jetzt reicht der Hintergrund unter den Rahmen:

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

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

Beispiel . Wert content-box

Und jetzt wird der Hintergrund durch padding weggeschoben:

<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;
}

Beispiel . Bei background-repeat: repeat

Bei background-repeat mit dem Wert repeat funktioniert die Eigenschaft background-origin immer wie mit dem Wert border-box, das heißt, der Hintergrund reicht immer unter den Rahmen:

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

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

Siehe auch

die Eigenschaft background-clip,
die die Position sowohl des Hintergrundbildes als auch der Füllung festlegt
die Eigenschaft background,
die eine Kurzschreibweise für den Hintergrund darstellt