Eigenschaft background-image

Die Eigenschaft background-image legt ein Hintergrundbild für ein Element fest. Standardmäßig kachelt das Bild mit seinen Kopien den gesamten Block, jedoch kann dieses Verhalten mit der Eigenschaft background-repeat aufgehoben werden.

Syntax

Selektor {
	background-image: url(Pfad zum Bild);
}

Selektor {
	background-image: none;
}

Werte

Wert	Beschreibung
`url`	Pfad zur Bilddatei. Der Bildname kann in doppelten Anführungszeichen, einfachen Anführungszeichen oder ganz ohne Anführungszeichen stehen.
`none`	Hebt das Hintergrundbild für das Element auf.

Standardwert: none.

Beispiel

Wir legen ein Hintergrundbild mit background-image fest und verbieten seine Wiederholung mit der Eigenschaft background-repeat:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Beispiel

Ohne background-repeat kachelt das Hintergrundbild den gesamten Block:

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

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Beispiel

Man kann gleichzeitig ein Hintergrundbild festlegen und eine Hintergrundfarbe mit background-color festlegen. In diesem Fall wird dort, wo kein Hintergrundbild ist, die Hintergrundfarbe angezeigt:

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

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Siehe auch

die Eigenschaft background,
die eine Kurzschreibweise für den Hintergrund darstellt