CSS background-imageEigenschaft
Beispiel
Legen Sie das Hintergrundbild des body-Elements fest:
Selbst ausprobieren »
Tag-Definition und Verwendungshinweise
Die Eigenschaft background-image legt das Hintergrundbild eines Elements fest.
Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich padding und border (aber ohne margin).
Standardmäßig wird das background-image in der oberen linken Ecke des Elements platziert und wiederholt sich sowohl vertikal als auch horizontal.
Tipp:Bitte legen Sie eine verfügbare Hintergrundfarbe fest, damit stattdessen die Hintergrundfarbe verwendet werden kann, wenn das Hintergrundbild nicht verfügbar ist.
| Standardwert: | none |
|---|---|
| Vererbt: | nein |
| Version: | CSS1 |
| JavaScript-Syntax: | object object.style.backgroundImage="url(stars.gif)" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browsersionsnummer an, die die Eigenschaft unterstützt.
Die Zahl unmittelbar vor -webkit-, -ms- oder -moz- ist die erste Browsersionsnummer, die die mit Präfix versehene Eigenschaft unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Hinweis:IE8 und frühere Versionen unterstützen das Festlegen mehrerer Hintergrundbilder für ein Element nicht.
Eigenschaftswert
| Wert | Beschreibung |
|---|---|
| url('URL') | Bild-URL |
| none | Kein Hintergrundbild wird angezeigt. Dies ist die Standardeinstellung. |
| linear-gradient() | Erzeugt ein lineares Farbverlauf-„Bild“ (von oben nach unten) |
| radial-gradient() | Erzeugt ein „Bild“ mit radialem Farbverlauf. (von der Mitte zu den Rändern) |
| repeating-linear-gradient() | Erstellen Sie ein sich wiederholendes lineares Gradienten-"Bild". |
| repeating-radial-gradient() | Erstellt ein sich wiederholendes radiales Gradienten-"Bild" |
| inherit | Legt fest, dass das Hintergrundbild vom übergeordneten Element geerbt werden soll |
Online-Beispiele
Dieses Beispiel demonstriert mehrere Hintergrundbilder in einem Dokument.
Ähnliche Artikel
CSS-Tutorial:CSS-Hintergründe
CSS3-Tutorial:CSS3-Hintergründe
Weitere Erweiterungen