CSS background-image-Eigenschaft
Die background-image-Eigenschaft definiert Hintergrundbilder für Elemente. Sie können ein oder mehrere Bilder angeben.
Standardmäßig wird ein Hintergrundbild vertikal und horizontal wiederholt und in der oberen linken Ecke des Elements platziert.
Der Hintergrund eines Elements umfasst die gesamte Größe, einschließlich padding und border (nicht margin).
Wenn das Bild nicht verfügbar ist, müssen Sie eine background-color angeben.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS1 + einige neue Werte in CSS3 |
| DOM-Syntax | object.style.backgroundImage = "url(img_tree.png)"; |
Syntax
Syntax der CSS background-image-Eigenschaft
background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;Beispiel für die background-image-Eigenschaft:
Beispiel für die CSS background-image-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>Hello World!</p>
</body>
</html>Ergebnis
Sehen Sie sich ein weiteres Beispiel an, in dem zwei Bilder verwendet werden, die mit Hilfe der background-position-Eigenschaft festgelegt werden.
Beispiel für die background-image-Eigenschaft mit anderen Hintergrund-Eigenschaften:
Beispiel für die CSS background-image-Eigenschaft mit 2 Bildern
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
padding: 100px;
background-image: url("https://de.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-attachment: fixed;
background-position: 5px 50px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>The background image is positioned 5px from the left, and 50px down from the top.</p>
</body>
</html>In diesem Beispiel wird ein "linear-gradient" mit zwei Farben als Hintergrundbild für ein <div>-Element festgelegt:
Beispiel für die background-image-Eigenschaft mit dem Wert "linear-gradient":
Beispiel für die CSS background-image-Eigenschaft mit dem Wert linear-gradient
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
background-image: linear-gradient(#eee, #1c87c9);
}
</style>
</head>
<body>
<h2>Linear gradient as a background image example</h2>
<p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
<div></div>
</body>
</html>Beispiel für die background-image-Eigenschaft mit dem Wert "repeating-radial-gradient":
Beispiel für die CSS background-image-Eigenschaft mit dem Wert repeating-radial-gradient
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 300px;
background-color: #cccccc;
background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
}
</style>
</head>
<body>
<h2>Radial gradient as a background image example</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| url | Definiert die URL des Bildes. Es können mehrere durch Kommas getrennte Bilder angegeben werden. |
| none | Es wird kein Hintergrundbild angezeigt. Dies ist der Standardwert. |
| linear-gradient | Ein linearer Farbverlauf wird als Hintergrundbild festgelegt. |
| radial-gradient | Ein radialer Farbverlauf wird als Hintergrundbild festgelegt. |
| repeating-linear-gradient | Wiederholt einen linearen Farbverlauf. |
| repeating-radial-gradient | Wiederholt einen radialen Farbverlauf. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Welche CSS-Eigenschaften können verwendet werden, um das Hintergrundbild eines Elements zu steuern?