Die CSS-Eigenschaft background-image definiert die Hintergrundbilder für Elemente. Es können ein oder mehrere Bilder verwendet werden.
Voreingestellt wird die Eigenschaft background-image an der linken oberen Ecke eines Elements platziert und sowohl vertikal als auch horizontal wiederholt.
Der Hintergrund eines Elements ist die Gesamtgröße des Elements, so dass es folgende Elemente beinhaltet: padding und border aber nicht margin.
Wenn das von Ihnen eingestellte Bild nicht verfügbar ist, müssen Sie auch background-color definieren.
| Anfangswert | none |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter und ::first-line. |
| Geerbt | Nein |
| Animierbar | Nein |
| Version | CSS1 + some new values in CSS3 |
| DOM Syntax | object.style.backgroundImage = "url(img_tree.png)"; |
Syntax
background-image: url | none | linear-gradient | radial-gradient | repeat-linear-gradient | repeat-radial-gradient | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft ackground-image</h2>
<p>Hello World!</p>
</body>
</html>Sehen Sie sich ein weiteres Beispiel an, bei dem zwei Bilder verwendet werden und sie mithilfe der Eigenschaft background-position angegeben werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-attachment: fixed;
background-position: 5px 50px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft background-image.</h2>
<p>Das Hintergrundbild wird 5px von links und 50px von oben positioniert.</p>
</body>
</html>In diesem Beispiel ist "linear-gradient" mit zwei Farben als Hintergrundbild für das Element <div> angegeben:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
background-image: linear-gradient(#eee, #1c87c9 );
}
</style>
</head>
<body>
<h2>Beispiel für Linearer Gradient als Hintergrundbild</h2>
<p>Diese lineare Steigung beginnt oben. Es beginnt grau und geht in blau über:</p>
<div></div>
</body>
</html>Hier ist ein Beispiel mit dem Wert "repeating-radial-gradient" mit drei Farben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 300px;
background-color: #cccccc;
background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
}
</style>
</head>
<body>
<h2>Beispiel für Radial gradient als ein Hintergrundbild</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| url | Definiert die URL des Bildes. Es kann mehr als ein Bild angegeben werden, das durch Kommas getrennt ist. |
| none | Es wird kein Hintergrundbild angezeigt. Es ist der Standardwert. |
| linear-gradient | Als Hintergrundbild wird ein linearer Gradient angegeben. |
| radial-gradient | Als Hintergrundbild wird ein radialer Gradient angegeben. |
| repeat-linear-gradient | Wiederholt einen linearen Gradienten. |
| repeat-radial-gradient | Wiederholt einen radialen Gradienten. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erzeugt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 15.0+ |
4.0+ 3.6 -moz- |
7.0+ |
11.5+ 10.1 -o- |
Übe dein Wissen
