Zum Inhalt springen

background-image

  • Redaktion 
  • Zuletzt aktualisiert am

#background-image

Legt ein Bild als Hintergrund für das Element fest.

default background-image: none;

Entfernt jedes Hintergrundbild.

background-image: url(/images/jt.png);

Verwendet das im url Pfad definierte Bild. Dieser Pfad kann entweder relativ (zur css-Datei) oder absolut sein (wie http://cssreference.io/images/jt.png).

background-image: linear-gradient(red, blue);

Sie können einen linearen Farbverlauf als Hintergrundbild definieren.

Sie müssen mindestens zwei Farben definieren. Die erste Farbe wird oben beginnen, die zweite unten.

Der Standardwinkel ist to bottom (oder 180deg), was bedeutet, dass der Farbverlauf vertikal ist und oben beginnt und unten am Element endet.

background-image: linear-gradient(45deg, red, blue);

Sie können einen Winkel angeben, entweder in Grad oder mit Schlüsselwörtern.

Wenn Sie Grad verwenden, geben Sie die Richtung des Gradienten an, oder wann er endet. So bedeutet 0deg die Spitze des Elements, wie 12:00 auf einer Uhr.

In diesem Beispiel bedeutet 45deg 2:30, oder die obere rechte Ecke.

background-image: radial-gradient(green, purple);

Sie können einen radialen Farbverlauf als Hintergrundbild definieren.

Sie müssen mindestens zwei Farben definieren. Die erste wird in der Mitte sein, die zweite an den Rändern.

background-image: radial-gradient(circle, green, purple);

Sie können die Form des radialen Farbverlaufs angeben: Kreis oder Ellipse (Standard).

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

Sie können Farbstopps mit Prozentwerten angeben.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

Du kannst angeben, wo der Farbverlauf enden soll:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

Wie bei der Hintergrund-Position können Sie die Position des Farbverlaufs angeben.