CSS-Background-Eigenschaft
Die CSS-Background-Eigenschaft ist eine Kurzschreibweise, mit der alle Hintergrund-Stileigenschaften festgelegt werden. Die Background-Eigenschaft umfasst die folgenden Eigenschaften:
- background-color, die zum Festlegen einer Hintergrundfarbe verwendet wird.
- background-image, die zum Festlegen eines oder mehrerer Hintergrundbilder für ein Element verwendet wird.
- background-repeat, die zur Steuerung der Wiederholung eines Elements verwendet wird.
- background-position, die zum Festlegen einer Hintergrundbildposition verwendet wird.
- background-origin, die zum Definieren des Hintergrund-Positionierungsbereichs verwendet wird, also der Position eines Bildes, das mithilfe der background-image-Eigenschaft platziert wird.
- background-clip, die zum Platzieren eines Hintergrundbilds oder einer Hintergrundfarbe innerhalb seiner Rahmenbegrenzung verwendet wird.
- background-attachment, die verwendet wird, um festzulegen, ob das Hintergrundbild fixiert ist oder mit dem Rest der Seite mitgescrollt wird.
- background-size, die zum Festlegen der Größe des Hintergrundbilds verwendet wird.
Wenn eine der Eigenschaften in der Background-Kurzschreibweise background-size ist, sollte ein Schrägstrich verwendet werden, um sie von background-position zu trennen.
Wenn mehrere background-image-Quellen verwendet werden, aber auch background-color benötigt wird, sollte diese zuletzt in der Liste stehen.
| Initial Value | Siehe einzelne Eigenschaften. |
|---|---|
| Applies to | Alle Elemente. Sie gilt auch für ::first-letter. |
| Inherited | Nein. |
| Animatable | Ja. Background-color, background-position und background-size sind animierbar. |
| Version | CSS1+ neue Eigenschaften in CSS3 |
| DOM Syntax | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Syntax
Syntax der CSS-Background-Eigenschaft
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;Beispiel für die background-Eigenschaft:
Beispiel für die CSS-background-color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Hier ist die Hintergrundfarbe auf Grün gesetzt.</p>
</body>
</html>Ergebnis
Beispiel für die background-Eigenschaft mit einem angewendeten Bild:
Beispiel für die CSS-background-image-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://de.w3docs.com/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Hier wird ein Hintergrundbild verwendet.</p>
</body>
</html>Siehe ein weiteres Beispiel mit der background-Eigenschaft, bei dem background-color, background-image, background-repeat und background-attachment-Werte angewendet werden.
Beispiel für die background-Eigenschaft mit unterschiedlichen Werten:
Beispiel für die CSS-background-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("https://de.w3docs.com/build/images/w3docs-logo-black.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>In diesem Beispiel legt die background-Eigenschaft background-color fest, die background-image-Eigenschaft setzt das Bild als Hintergrund, background-repeat gibt an, dass das Bild nicht wiederholt wird, background-attachment legt fest, dass das Bild fixiert ist, und background-position gibt an, dass das Bild zentriert sein soll.</p>
</body>
</html>Im folgenden Beispiel wird die background-size-Eigenschaft verwendet, um die Größe des Hintergrunds anzugeben.
Beispiel für die background-size-Eigenschaft:
Beispiel für die CSS-background-size-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Hier ist die Größe des Hintergrunds auf cover gesetzt.</p>
</body>
</html>Hier legt die background-clip-Eigenschaft fest, wie weit sich der Hintergrund innerhalb eines Elements ausdehnen soll.
Beispiel für die background-clip-Eigenschaft:
Beispiel für die CSS-background-clip-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #ccc;
padding: 25px;
background: #ccc;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<div>
<p>Die background-clip-Eigenschaft für dieses div-Element ist auf padding-box gesetzt.</p>
</div>
</body>
</html>Im nächsten Beispiel wird die background-origin-Eigenschaft verwendet. Sie ermöglicht es, dass das Hintergrundbild in der oberen linken Ecke des Inhalts beginnt.
Beispiel für die background-origin-Eigenschaft:
Beispiel für die CSS-background-origin-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("https://de.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Hier ist background-origin: padding-box (Standard) gesetzt.</p>
<div></div>
</body>
</html>Values
| Value | Description |
|---|---|
| background-color | Legt die Hintergrundfarbe fest. |
| background-image | Legt ein oder mehrere Bilder fest. |
| background-position | Gibt die Position der Hintergrundbilder an. |
| background-size | Legt die Größe des Hintergrundbilds fest. |
| background-repeat | Gibt an, wie die Hintergrundbilder wiederholt werden. |
| background-origin | Gibt den Positionierungsbereich der Hintergrundbilder an. |
| background-clip | Gibt den Zeichenbereich der Hintergrundbilder an. |
| background-attachment | Gibt an, ob das Bild fixiert ist oder nicht. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert. |
| inherit | Übernimmt diese Eigenschaft vom übergeordneten Element. |
Practice
What are the properties of CSS background?