CSS Grundlagen: Background Tipps und Tricks – kreative Hintergründe für ansprechende Layouts

English

CSS Eigenschaft Background – Hintergrund

Die CSS-Eigenschaft background ist die Kurzschreibweise für die CSS-Eigenschaften

CSS-Eigenschaft: Background
Beschreibung mögliche Werte Standardwert Kategorie
Hintergrund Hintergrundfarbe
background-image
background-repeat
background-position
background-attachment
inherit		 Farben
Hintergrundfarbe

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft background.

Farbe definieren

Die Farben kann man in CSS auf unterschiedliche Weise definieren:

  1. mit dem Hex-Code der Farbe #RRGGBB
    Dies ist der Standard, um Farben in CSS zu definieren.

    Der Farb-Code beginnt mit dem Rautezeichen #, gefolgt von 6 Hex-Ziffern. Die Farb-Anteile für Rot, Grün und Blau werden jeweils mit zwei Hex-Ziffern (0 bis F) angegeben. Beispiel: Der Farb-Code #DAA520 bezeichnet die Farbe     .

  2. mit dem Hex-Code der Farbe mit Transparenz #RRGGBBAA
    Der Hex-Code unter 1. kann durch zwei weitere Ziffern erweitert werden. Dadurch kann man die Deckkraft (Englisch: Opacity) der Farbe definieren. Der Wert für die Deckkraft muss zwischen 00 und FF liegen.

    • 00 bedeutet 0% Deckkraft, also volle Transparenz

    • FF bedeutet 100% Deckkraft, also überhaupt keine Transparenz.

    Beispiel: Der Farb-Code #DAA520B2 (etwa 70% Deckkraft) bezeichnet die Farbe     .

  3. mit einem HTML Farbnamen (z.B. LightGrey bzw. LightGray).

  4. mit einem RGB-Wert rgb(R,G,B)
    Farben können auch mit ihren RGB Werten definiert werden. Die Werte für die drei Farbanteile R, G und B müssen dabei dezimal angegeben werden und liegen jeweils im Bereich zwischen 0 und 255. Ob man diese Methode anwendet oder doch lieber die Methode unter 1. benutzt, ist Geschmacksache.

    Beispiel: Der Farb-Code #daa520 setzt sich zusammen aus den Anteilen für die drei Grundfarben:

    Rot-Anteil: Hex DA = dezimal 218,
    Grün-Anteil: Hex A5 = dezimal 165,
    Blau-Anteil: Hex 20 = dezimal 32

    Damit ist #DAA520 das gleiche wie rgb(218, 165, 32).
    Der Farb-Code rgb(218,165,32) bezeichnet die Farbe     .

  5. mit einem RGB-Wert mit Transparenz rgb(R,G,B,A)
    Die Definition der Farbe unter 4. kann erweitert werden. Zusätzlich zu den drei Farbwerten kann noch ein Wert für die Transparenz angegeben werden. Der Wert für die Transparenz muss zwischen 0.0 und 1.0 liegen.

    Beispiel: Der Farb-Code rgb(218,165,32) bekommt zusätzlich 70 Prozent Deckkraft. Das ist der Farb-Code rgb(218,165,32,0.7). Dieser Farb-Code bestimmt die Farbe     .

Beispiel 
/* Hintergrund der Seite */
body {
  font-family: "Noto Sans", "Open Sans", Verdana, Arial, sans-serif;
  /* GhostWhite */
  background: #f8f8ff;

  /* DarkSlateGrey */
  color: #2f4f4f;

  /* Standard Schriftgröße */
  font-size: 1.0em;
}