Die CSS-Eigenschaft background ist eine Shorthand-Eigenschaft und erlaubt, alle Eigenschaften des Hintergrundstils festzulegen. Die Eigenschaft background beinhaltet die folgenden Eigenschaften:
- background-color
- background-image
- background-repeat
- background-position
- background-origin
- background-clip
- background-attachment
- background-size
Die Eigenschaft background-color wird verwendet, wenn wir die Farbe eines Tag-Hintergrundes ändern möchten.
Die Eigenschaftbackground-image setzt ein oder mehrere Hintergrundbilder für ein Element.
Mit der Eigenschaft background-repeat können wir die wiederholte Position eines Elements steuern.
Wir verwenden die Eigenschaft background-position für die Position des Hintergrundbildes.
Die Eigenschaft background-origin definiert den Hintergrundpositionierungsbereich, der die Position eines Bildes ist, das unter Verwendung der Eigenschaft background-image platziert wird.
Die Eigenschaft background-clip wird verwendet, um Hintergrundbild oder -farbe unter den Rand zu legen.
Die Eigenschaft background-attachment definiert, ob das Hintergrundbild fest ist oder ob es zusammen mit dem Rest der Seite gescrollt wird.
Die Eigenschaft background-size wird zur Definition der Hintergrundbildgröße verwendet.
| Anfangswert | Individuelle Eigenschaften ansehen. |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja. Background-color, background-position und background-size sind animierbar. |
| Version | CSS1+ new properties in CSS3 |
| DOM Syntax | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Syntax
background: bg-color | bg-image | bg-position | bg-size | bg-repeat | bg-origin | bg-clip | bg-attachment | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft background</h2>
<p>Hier ist die Hintergrundfarbe auf grün gesetzt.</p>
</body>
</html>Hier sehen Sie ein weiteres Beispiel, wo ein Bild mit der Eigenschaft background verwendet wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft background</h2>
<p>Hier wird ein Hintergrundbild verwendet.</p>
</body>
</html>Sehen Sie ein weiteres Beispiel mit der Eigenschaft background, wo die Werte background-color, background-image, background-repeat und background-attachment verwendet wurden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft background</h2>
<p>In diesem Beispiel wird die Eigenschaft background-color für die Hintergrundfarbe, die Eigenschaft background-image zum Einstellen des Bildes auf den Hintergrund, background-repeat zum Festlegen des nicht zu wiederholenden Bildes, background-attachment zum Festlegen des zu fixierenden Bildes und background-position zum Festlegen des zu zentrierenden Bildes verwendet.</p>
</body>
</html>Ein weiteres Beispiel mit der Eigenschaft background-size, die so eingestellt ist, dass sie die Größe des Hintergrunds angibt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft background</h2>
<p>Hier ist die Größe für den Hintergrund auf 100px eingestellt.</p>
</body>
</html>Ein Beispiel mit background-clip. Sie gibt an, wie weit sich der Hintergrund innerhalb eines Elements erstrecken soll.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #ccc;
padding: 25px;
background: #ccc;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft background</h2>
<div>
<p>Background-clip in diesem Div-Element ist auf Padding-box eingestellt.</p>
</div>
</body>
</html>Hier ist ein weiteres Beispiel, wo die Eigenschaft background-origin verwendet wird. Dadurch kann das Hintergrundbild von der linken oberen Ecke des Inhalts ausgehen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft background</h2>
<p>Hier background-origin: padding-box (voreingestellt) ist gesetzt.</p>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| background-color | Setzt die Hintergrundfarbe. |
| background-image | Setzt ein oder mehrere Bilder. |
| background-position | Zeigt die Position der Hintergrundbilder an. |
| background-size | Setzt die Größe des Hintergrundbildes. |
| background-repeat | Definiert, wie die Hintergrundbilder wiederholt werden sollen. |
| background-origin | Bestimmt den Positionierungsbereich der Hintergrundbilder. |
| background-clip | Zeigt den Malbereich der Hintergrundbilder an. |
| background-attachment | Bezeichnet, ob das Bild fixiert ist oder nicht. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erzeugt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
