Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: background
KurzbeschreibungWerteStandardwertKategorieHinweis
Hintergrund (allgemein)0% 0%
Allgemein:
Farben
Hintergründe
CSS 2.1:
Colors and Backgrounds
CSS 3:
Backgrounds and Borders
 

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.
Browserunterstützung von background
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu background:



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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 5.674 sec.

Browser-Marktanteile