CSS Eigenschaft background-image
Beispiel
Legen Sie ein Hintergrundbild für das <body>-Element fest:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
Beispiel
Legen Sie zwei Hintergrundbilder für das <body>-Element fest:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die background-imageEigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest.
Standardmäßig wird ein Hintergrundbild in der oberen linken Ecke eines Elements platziert und sowohl vertikal als auch horizontal wiederholt.
Tipp: Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Polsterung und Rahmen (aber nicht des Rands).
Tipp: Legen Sie immer eine Hintergrundfarbe fest , die verwendet werden soll, wenn das Bild nicht verfügbar ist.
| Standardwert: | keiner |
|---|---|
| Vererbt: | Nein |
| Animierbar: | Nein. Lesen Sie mehr über animierbare |
| Ausführung: | CSS1 + neue Werte in CSS3 |
| JavaScript-Syntax: | Objekt .style.backgroundImage="url(img_tree.gif)" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Hinweis: IE8 und früher unterstützen nicht mehrere Hintergrundbilder.
CSS-Syntax
background-image: url|none|initial|inherit;
Eigenschaftswerte
| Value | Description |
|---|---|
| url('URL') | The URL to the image. To specify more than one image, separate the URLs with a comma |
| none | No background image will be displayed. This is default |
| conic-gradient() | Sets a conic gradient as the background image. Define at least two colors |
| linear-gradient() | Sets a linear gradient as the background image. Define at least two colors (top to bottom) |
| radial-gradient() | Sets a radial gradient as the background image. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Legt zwei Hintergrundbilder für das <body>-Element fest. Lassen Sie das erste Bild nur einmal erscheinen (ohne Wiederholung) und lassen Sie das zweite Bild wiederholen:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
Beispiel
Verwenden Sie verschiedene Hintergrundeigenschaften, um ein „Helden“-Bild zu erstellen:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Beispiel
Legt einen linearen Farbverlauf (zwei Farben) als Hintergrundbild für ein <div>-Element fest:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow);
}
Beispiel
Legt einen linearen Farbverlauf (drei Farben) als Hintergrundbild für ein <div>-Element fest:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow, green);
}
Beispiel
Die Funktion repeating-linear-gradient() wird verwendet, um lineare Farbverläufe zu wiederholen:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Beispiel
Legt einen radialen Farbverlauf (zwei Farben) als Hintergrundbild für ein <div>-Element fest:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow);
}
Beispiel
Legt einen radialen Farbverlauf (drei Farben) als Hintergrundbild für ein <div>-Element fest:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow, green);
}
Beispiel
Die Funktion repeating-radial-gradient() wird verwendet, um radiale Farbverläufe zu wiederholen:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-radial-gradient(red, yellow 10%, green 20%);
}
Verwandte Seiten
CSS-Tutorial: CSS-Hintergrund , CSS-Hintergründe (erweitert) , CSS-Verläufe
HTML-DOM-Referenz: backgroundImage-Eigenschaft