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