MichiPedia

• Hintergrundfarbe liegt hinten (background-color)
• Hintergrundbilder liegen davor (background-image)

Standard (z.B. div)

• background-size
  • 100% 100% (Bild geht über den gesamten Bereich und wird gestreckt !)
  • cover
    • Seitenverhältnis bleibt erhalten
    • Bild wird vergrößert
    • wird entweder links und rechts oder oben und unten abgeschnitten
• background-repeat (default)
  • repeat, repeat-x, repeat-y, no-repeat
• background-attachment
• background-position
  • 0% 0% (x-Achse y-Achse; default = linke obere Ecke)
  • 50% 50% (oder: center center)

Hintergrundbild für den body

Problem 1

• Bild verhält sich so, als wenn im html Element gesetzt wird
• Höhe ist NICHT der angezeigte Bereich, sondern nur von den anderen Elementen belegte Bereich
• Resultat: das Bild kann unten abgeschnitten werden
  • bei position 0% 0% wird der gesamte Bereich belegt
  • bei z.B. 50% 100% NICHT
• Abhilfe:
  • im html Element: min-height: 100%
  • im body Element: min-height: 100%

Problem 2

• wenn sehr viel content vorhanden ist, wird Bild entsprechend stark gestreckt
• Abhilfe
  • background-attachment: fixed
• Bild bleibt "statisch" und nur Inhalt scollt

Farbverläufe

• werden nicht als Color implementiert sonder als Hintergrundbild

Linear

• linear-gradient([richtung],[farbe],[position], ...)
• background-image: linear-gradient (0deg, black, white)
  • erzeugt einen Farbverlauf von unten nach oben)
• background-image: linear-gradient (90deg, black, white)
  • erzeugt einen Farbverlauf von rechts nach links)
• background-image: linear-gradient (90deg, black 20%, red 30%, red 70%, white 100%)

Kreisförmig

• radial-gradient([form], [richtung],[farbe],[position], ...)
• backgroud-image: radial-gradient(circle at 50% 50%, black, white)

Hintergründe übereinander

• Hintergrundfarbe liegt immer unten
• Bei mehreren Hintergrundbildern liegt zuerst genanntes oben auf, also
  • background-image:
    url1, /* oben */
    linear-gradient, /* in der Mitte */
    url2; /* unten */

• BEISPIELE:
• background-image:
  linear-gradient(90deg, red, rgba(0, 0, 0, 0), red),
  url(" ... ");
• background-image:
  linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%),
  url" ... ");
• background-image:
  linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%),
  url(" ... ");
• Bei nachfolgenden "background" Befehlen gibt es eine Zuordnung von 1 Parameter zu erstem Image usw. Beispiel:
  • background-size:
    50%,
    50%,
    cover;
  • background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;