## Background

Bisher haben wir zur Gestaltung von Hintergründen das Style-Attribut `background-color` kennen gelernt.

Es gibt aber noch ein Umfangreicheres Angebot um einen Hintergrund zu gestallten: `background`

Beginnen wir erstmal einfach, wir können wie gewohnt Farben vergeben:

          .bg-color {
            background: darkkhaki;
          }

Wir können aber auch direkt Bilder von CSS aus laden und anzeigen:

          .bg-image {
            background: url('cat.png');
          }

Nun sehen wir, das Bild ist größer als der Container der das Bild anzeigen soll.

Das kann man aber beheben mit dem Attribut `background-size`

          .bg-cover {
            background-size: cover;
          }

Weitere Optionen für `background-size`:

- contain
- <width> (height: auto)
- <width> <height>

`background-size: contain`

Mit contain sehen wir, dass das Bild sich zu wiederholen scheint.

Das ist ein "Feature" von `background`, eines das wir steuern können.

          .bg-no-repeat {
            background-repeat: no-repeat;
          }

Hat es Funktioniert?

Testen wir es mit einem weiteren Feature aus: Mehrere Backgrounds:

          .bg-multi {
            background: url("/images/cat.png"), orange;
            background-repeat: no-repeat;
            background-size: contain;
            height: 600px;
          }

`background-repeat` kann alternativ 3 andere Werte annehmen:

- repeat (in beide Richtungen)
- repeat-x (entlang der X-Achse)
- repeat-y (entlang der Y-Achse)

Positionierung des Hintergrundes mit `background-position`

Das Bild kann im Container frei bewegt werden, ein Überhang wird "abgeschnitten", wie man es auch bisher gesehen hat.

          .bg-center {
            background-position: center;
          }

          .bg-top-right {
            background-position: top right;
          }

          .bg-20-80 {
            background-position: 20% 80%;
          }

CSS wäre nicht CSS, wenn wir das nicht alles in einer Regel vereinen können:

          .bg-easy {
            background:
              repeat-y 20% 80%/200px 200px url("/images/cat.png"),
              orange;
          }

Hintergründe in Bunt

Mithilfe von CSS-Funktionen

CSS bietet einige Funktionen um Gradienten-Hintergründe zu erstellen:

- (repeating)-linear-gradient
- (repeating)-radial-gradient
- (repeating)-conic-gradient

Diese können in beliebiger Art und Weise kombiniert werden, um Eindrucksvolle Muster zu erstellen.

Fangen wir einfach an, mit der Funktion `linear-gradient`, geben wir an in welche Richtung der Gradient wandern soll, welche Farbe beginnt und welche Endet:

          .linear-rbp {
            background: linear-gradient(to right, blue, pink);
          }

Wir können anstatt einer genauen Richtungsangabe auch eine Grad-Angabe machen

          .linear-72bp {
            background: linear-gradient(72deg, blue, pink);
          }

Es können auch beliebig viele Farben angegeben werden

          .linear-rainbow {
            background: linear-gradient(
              45deg, red, orange, yellow, green, blue, violet, pink
            );
          }

Zu guter letzt, können wir auch die Breite der einzelnen Farb-Gradiente festlegen

          .linear-stops {
            background: linear-gradient(
              to bottom, darkgoldenrod -500px, black 350px, darkgoldenrod
            );
          }

Schauen wir uns kurz die anderen beiden Gradienten-Varianten an:

          .radial {
            background: radial-gradient(red 10px, yellow 30%, royalblue 50%);
            border-radius: 50%;
          }

Und `conic-gradient`'s

          .conic {
            background: conic-gradient(
              from -45deg, red, blue, yellow, green
            );
          }

Die zuvor "Repeating" Varianten, lassen es wie vielleicht schon denkbar zu, die Gradienten über einen größeren Bildschirmbereich wiederholend "zu malen"

          .conic-repeating {
            background: repeating-radial-gradient(
              black,
              black 20px,
              white 20px,
              white 40px,
            );
          }