CSS-Eigenschaft: background, Kategorien: Farben (allgemein), Hintergründe (allgemein), Colors and Backgrounds (CSS 2.1), Backgrounds and Borders (CSS 3)
Hintergrund (allgemein)
Kurzschreibweise für verschiedene Hintergrundeigenschaften.
Bestimmt u.a. Hintergundfarbe und/oder
Hintergrundgrafik
einschließlich Wiederholung, Positionierung
und Fixierung
der Hintergrundgrafik.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Hintergrund (allgemein) | 0% 0% |
|
Verwandte Eigenschaften aus der Kategorie: Farben (allgemein), Hintergründe (allgemein), Colors and Backgrounds (CSS 2.1), Backgrounds and Borders (CSS 3):
- Aktuelle Seite: background
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
- color
- opacity
- outline-color
- text-decoration-color
Folgendes ist beim Einsatz von background zu beachten:
- background ist die Kurzschreibweise für Hintergrundinformationen und lässt folgende Zuweisungen zu: background-color, background-image, background-repeat, background-attachment und background-position.
- Dabei ist mindestens die Angabe einer Hintergrundfarbe oder einer Grafik notwendig, damit ein Effekt erzielt wird.
- Kurzschreibweisen sind effektiv, aber kompliziert zu lesen und deswegen fehlerträchtig. Gerade beim Einstieg ins CSS, aber auch für ein gut lesbares CSS empfiehlt sich der Einsatz der einzelnen Eigenschaften.
- Die Reihenfolge der Parameter spielt keine Rolle.
- Wird eine Anweisung in der Kaskade erneut vergeben, werden Einzelparameter nicht vererbt, sondern die Initialwerte für background gesetzt.
- background-position erwartet zwei Parameter. Wird dieser nicht vergeben, und die Grafik auch nicht wiederholt, ist die Hintergrundgrafik links oben. Ist nur ein Positionswert gesetzt, wird der zweite automatisch auf 50% gesetzt.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu background:
- W3C Spezifikation:
http://www.w3.org/TR/css3-background/#background
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
backface-visibility - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
background-attachment
Beispiele
HTML:
<div> </div>CSS:
div {
height: 200px;
border: 1px solid #000;
background: #aaa url('/img/ball.png');
}
/* Die Kugel-Grafik hat einen transparenten Hintergrund, von daher wird die graue Farbe im Hintergrund sichtbar. */Beispiel nur für: 
Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="demoWiki"></div>CSS:
div.demoWiki {
background: url('/img/css-wiki.png') blue;
}
/* Eine vollflächige Hintergrundgrafik wird gekachelt, eine Hintergrundfarbe wird in dem Fall nicht sichtbar.*/Beispiel nur für:
Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="demoEins"></div>CSS:
div.demoEins {
background: url('/img/ball.png') repeat-x 200px 100px;
}
/* Der graue Farbwert wird nicht von der Deklaration im Beispiel Nr. 1 geerbt. Die erneute Angabe von "background" setzt alle Parameter auf die Defaultwerte. */Beispiel nur für:
Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="demoZwei"></div>CSS:
div.demoZwei {
background: url('/img/ball.png') repeat-x 0px 50px;
background-color: #00FFFF;
}
/* Es ist möglich, Farbwerte (oder andere Eigenschaften) durch Einzeleigenschaften wie "background-color" zu ergänzen */Beispiel nur für:
Beispiel Nr. 4 So sieht's aus:
HTML:
<div class="demoDrei"></div>CSS:
div.demoDrei {
background: url('/img/ball.png') repeat-x 200px 150px yellow;
}
/* Falls man die Kurzschreibweise Einsetzt, empfielt es sich auch alle Parameter darin zu vergeben. */Beispiel nur für:
Beispiel Nr. 5 So sieht's aus:
HTML:
<div class="demoVier"></div>CSS:
div.demoVier {
background: repeat-y #00f url('/img/ball.png') 100px 0px;
}
/* Die Reihenfolge der Parameter spielt keine Rolle. Lediglich die Werte für die Hintergrundposition müssen zusammen stehen.*/Beispiel nur für:
Beispiel Nr. 6 So sieht's aus:
HTML:
<div class="demoFuenf"></div>CSS:
div.demoFuenf {
background: no-repeat url('/img/ball.png') ;
}
/* Kein Wert für die Positionierung setzt die Defaultwerte 0% 0%. */Beispiel nur für:
Beispiel Nr. 7 So sieht's aus:
HTML:
<div class="demoSechs"></div>CSS:
div.demoSechs {
background: no-repeat url('/img/ball.png') 300px;
}
/* Ist nur ein Wert für die Hintergrundposition vergeben, wird der zweite auf 50% gesetzt. */Beispiel nur für:
Beispiel Nr. 8 So sieht's aus:
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!