Howard Harper-Barnes - Zu aller Ehre

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Im Gegensatz zu einem normalen Bild- oder Videoelement wird CSS Background-Image eingesetzt, wenn man über ein Bild oder Video noch einen responsiven Text legen möchte, z. B. bei Hero-Images. Auch auf der Startseite von Dr. Web findet man solch ein Element mit CSS Hintergrundbild:

Als Hintergrundbild können dabei alle gängigen Bildformate eingesetzt werden. Sogar inline-codierte Bilder (base64), SVG und Farbverläufe werden unterstützt. In diesem Beitrag werden wir jede einzelne CSS-Hintergrundeigenschaft kennenlernen, sowie zum Schluss die sog. „Shorthand“-Syntax von CSS Background-Image. Los geht’s!

Das Hero-Image-Element von der Dr. Web Startseite auf dem steht: „Dr. Web die besten Digitalagenturen für Ihr Projekt.“
Das Hero-Image von der Dr. Web Startseite ist ebenso ein Element mit CSS Hintergrundbild.

Alle CSS Background-Image Eigenschaften im Überblick

Hier eine Liste mit allen Eigenschaften, die wir heute besprechen werden.

alle CSS background image Eigenschaften.
Hier die Liste aller CSS Hintergrund-Eigenschaften alphabetisch sortiert: background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size

Was sind CSS Background-Image Eigenschaften?

Mit den CSS-Hintergrundeigenschaften können wir die Größe und Eigenschaften von Bildern steuern, so dass wir Bilder und darüber liegende Texte und z.B. Buttons mobil-freundlich sowohl für kleinere als auch für größere Bildschirme erstellen können.

Zum Beispiel,

  • Die Eigenschaft background-size erlaubt uns, die Breite und Höhe unseres Bildes entsprechend der Bildschirmgröße anzupassen.
  • background-position erlaubt es uns, dem Browser mitzuteilen, wo er das Bild auf dem Bildschirm platzieren soll.
  • Und vieles mehr!

Ein Demo-Projekt aufsetzen

Im Idealfall kennst Du schon ein paar CSS Grundlagen und etwas HTML. Du brauchst außerdem einen HTML-Editor Deiner Wahl, um die Dateien bearbeiten zu können. Für dieses Beispiel benutzen wir Visual Studio Code (auch VS-Code genannt).

Die HTML-Datei erstellen

Erstelle ein div mit dem Klassennamen ‚container‘ innerhalb des body-Tags in der HTML-Datei.

 <div class="container"></div>

Die CSS-Datei erstellen

Im CSS musst du eine Höhe für den Container angeben, sonst können wir das Bild nicht sehen. In unserem Fall werden wir sie auf 100vh setzen, das bedeutet, das Bild soll die volle Höhe des Bildschirms (vh steht für Viewport Height, siehe „Neue Einheiten für responsive Designs“) einnehmen:

.container {
  height: 100vh;
 
}

Lade die Bilder für das Projekt herunter

Die Bilder und Beispieldateien kannst Du hier herunterladen.

Die Eigenschaften von CSS background-image

CSS background-image

Mit der Eigenschaft background-image können wir Bilder in unserem Stylesheet hinzufügen, wie folgt:

.container {
// Wir setzen den Bildpfad bzw. die URL in Anführungszeichen
  background-image: url(' ');
 
}

Wir können background-image auf 2 Arten verwenden:

  • Indem wir den relativen Pfad angeben, z.B.
.container {
  background-image: url('/wp-content/uploads/2021/08/background-image.png');
 
}
  • Oder durch die Angabe der URL des Bildes, also:
.container {
  background-image: url('/wp-content/uploads/2021/08/background-image.png');
 
}

Wie man CSS background-image einbindet

CSS Hintergrundbilder kann man wahlweise über die URL (als direkten Link) oder per relativen Pfad einbinden. Es gibt drei Fälle, in welchen es Sinn macht, einen relativen Pfad anzugeben:

  1. Wenn image und style.css im selben Ordner sind, sieht der relative Pfad so aus: background-image: url("kitty.png")
  2. Wenn sich das Bild im einem Unterordner — hier „Assets“ — befindet, sieht der relative Pfad so aus: background-image: url("/assets/kitty.png")
  3. Wenn sich das Bild im einem übergeordneten Ordner befindet, benutzen wir diese Pfadangabe: background-image: url("../kitty.png")

Wenn die Bilder, die HTML und die style.css – Datei im gleichen Ordner sind, sieht das so aus:

Bild vom Projekt in Sublime.
So sieht der Ordner als Projekt im HTML-Editor aus.

Die CSS-Eigenschaft background-size

Wir können die Größe eines Bildes mit der Eigenschaft background-size anpassen.

background-size Titelbild.

Das CSS dazu sieht aus wie folgt:

.container {
  background-size: cover;
 
}

Wir können background-size auf 3 Arten verwenden:

  • wir können die Werte cover oder contain verwenden
  • die Breite und Höhe des Bildes festlegen (z.B. background-size: 200px 200px;)
  • auto verwenden

Beginnen wir mit der Diskussion der Cover- und Contain-Werte.

Der Unterschied zwischen background-size: cover und contain anhand eines Beispielbilds mit einem Bären, der Ramen-Nudeln isst, aufgezeigt.

Der Wert background-size: cover

Beim Wert background-size: cover;
füllt das Bild die ganze Breite aus, und zwar so, die kurze Seite des Hintergrundbildes in die Box reinpasst. Dafür müssen wir ein Bild einfügen, dessen Höhe festlegen und die Bildwiederholung stoppen. Im CSS geht das folgendermaßen:

.container {
  background-image: url('cute-bear.png');
 
  background-repeat: no-repeat;
 
  background-size: cover;
 
  // Höhe nicht vergessen
  height: 100vh;
 
}
Ein Kurzvideo, das einen Bören zeigt, der Ramen-Nudeln schlürft. Im Video wird das Bild auf verschiede Größen skaliert.
Wenn wir diese Eigenschaft verwenden, wird das Bild auf die gesamte Breite gestreckt, auch wenn wir die Größe des Fensters ändern.

Der Wert background-size: contain

Bei background-size: contain;
wird die längere Seite des Hintergrundbildes in die umgebende Box eingepasst. Um das zu erreichen, geben wir folgende Werte an:

.container {
  background-image: url('cute-bear.png');
 
  background-repeat: no-repeat;
 
  background-size: contain;
 
  // Höhe nicht vergessen
  height: 100vh;
 
}
Ein Kurzvideo, das einen Bären zeigt, der Ramen-Nudeln schlürft. Im Video wird das Bild auf verschiede Größen skaliert, sodass die lange Seite des Hintergrundbildes immer in das Fenster passt.
Bei background-size: contain;
wird die lange Seite des Hintergrundbildes in die Box eingepasst.

Breite und Höhe bei CSS Hintergrund-Bildern

Wir können die Breite und Höhe des Bildes mit der Eigenschaft background-size festlegen. Bitte beachten, dass dadurch die Bilder verzerrt aussehen können, wie im folgenden Beispiel:

Das Bild mit dem Bären auf 200px mal 200px skaliert. Es wird verzerrt.
Geben wir ein anderes bzw. falsches Seitenverhältnis an, sieht das Bild verzerrt aus.

Hier die Größenangaben im CSS:

.container {
// hier definieren wir width & height 
  background-size: 200px 200px;
 
}

Vergessen wir auch nicht, das Bild einzufügen, seine Höhe festzulegen und die Bildwiederholung zu beenden. Das Codeschnipsel sieht wie folgt aus:

.container {
  background-image: url('cute-bear.png');
 
  background-repeat: no-repeat;
 

// hier definieren wir width & height 
  background-size: 200px 200px;
 
  // Höhe nicht vergessen
  height: 100vh;
 
}

Automatische Größenanpassung mit CSS background-size: auto

Wenn wir diesen Wert verwenden, bleibt das Bild in seiner ursprünglichen Größe. Es ändert sich nicht, wenn wir die Größe des Fensters ändern. Das sieht dann so aus:

Ein Kurzvideo, das einen Bären zeigt, der Ramen-Nudeln schlürft. Im Video bleibt das Bild immer vollständig sichtbar und ändert seine Größe, wenn sich die Breite des Bildschirms ändert.
Mit background-size: auto passt sich das Bild immer automatisch der Größe des Bildschirms an, so dass alle Bereiche des Bildes immer sichtbar bleiben.

Die CSS-Eigenschaft background-repeat

Mit dieser Eigenschaft können wir ein und dasselbe Bild mehrfach wiederholen.

Auf dem Titelbild steht backgrund-repeat.

Das CSS dazu sieht wie folgt aus:

.container {
  background-repeat: repeat;
 
}

CSS background-repeat hat sechs Werte:

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • space
  • round
Ein Überblick über die verschiedenen Werte bei CSS background-repeat.
bei CSS Background repeat round wiederholen sich die Bilder bis zum Rand des Viewports. bei CSS Background repeat space verteilen sich die Bilder mit dem gleichen Abstand zueinander.

Wir untersuchen nun, was mit den einzelnen Werten geschieht. Zuvor müssen wir jedoch ein Bild mit der Eigenschaft background-image einfügen, in folgendem Beispiel ist es die kitty.png:

.container {
  background-image: url('kitty.png');
 
  background-size: 200px 200px;
 
  // hier werden wir die Werte verändern 
  background-repeat: no-repeat;
 
  height: 100vh;
 
}

CSS background-repeat

Die X- und die Y-Achse in background-repeat.

Mit diesem Wert können wir dasselbe Bild sowohl auf der X- als auch auf der Y-Achse mehrfach wiederholen, solange der Bildschirmbereich nicht endet. Hier ist die Größe des Kätzchens 200px x 200px.

Um dieses Ergebnis zu erzielen, schreiben wir:

.container {
  background-image: url('kitty.png');
 
  background-size: 200px 200px;
 
  background-repeat: repeat;
 
  height: 100vh;
 
}

Der Wert background-repeat: repeat-x

Dieser Wert ermöglicht es uns, dasselbe Bild mehrmals entlang der X-Achse zu wiederholen, solange der Bildschirmbereich nicht endet.

Die Kitty wird entlang der X-Achse wiederholt angezeigt.

um dies zu erreichen, schreiben wir:

.container {
  background-image: url('kitty.png');
 
  background-size: 200px 200px;
 
  background-repeat: repeat-x;
 
  height: 100vh;
 
}

Der Wert background-repeat: repeat-y

Dieser Wert funktioniert genauso wie „repeat-x“, aber entlang der Y-Achse, solange der Bildschirmbereich nicht endet.

Die Kitty wird entlang der Y-Achse wiederholt angezeigt.

um dies zu erreichen, schreiben wir:

.container {
  background-image: url('kitty.png');
 
  background-size: 200px 200px;
 
  background-repeat: repeat-y ;
 
  height: 100vh;
 
}

Der Wert background-repeat: no-repeat

Mit diesem Wert können wir unser Originalbild ohne Wiederholungen erhalten. Dieser Wert ist wird bei CSS Hintergrundbildern am Häufigsten eingesetzt, da diese sich in der Regel nicht wiederholen sollen.

Das Bild von der Kitty wird nur einmal angezeigt, das Bild wiederholt sich nicht.

um dies zu erreichen, schreiben wir:

.container {
  background-image: url('kitty.png');
 
  background-size: 200px 200px;
 
  background-repeat: no-repeat;
 
  height: 100vh;
 
}

Der Wert background-repeat: space

Dieser Wert funktioniert sowohl entlang der X- als auch der Y-Achse. Wir können den Hauptunterschied zwischen den Werten space und round sehen, wenn wir die Größe des Browserfensters ändern. Dabei werden die Zwischenräume so gleichmäßig so weit gestreckt, bis noch ein weiteres Bild in das Fenster hineinpasst.

bei CSS Background repeat space wird neben den Bilder Weißraum hinzugefügt, solange bis noch ein weiteres Bild auf die X- oder Y-Achse passt.

um dieses Resultat zu erreichen, schreiben wir:

.container {
  background-image: url('kitty.png');
 
  background-size: 200px 200px;
 
  background-repeat: space;
 
  height: 100vh;
 
}

Der Wert background-repeat: round

Der Wert background-repeat: round; funktioniert sowohl entlang der X- als auch der Y-Achse. Das Bild wird gestreckt bzw. verzerrt, wenn wir die Größe des Fensters ändern.

bei CSS Background repeat round werden die Bilder verzerrt, solange bis noch ein weiteres Bild auf die X- oder Y-Achse passt.

um dies zu erreichen, schreiben wir:

.container {
  background-image: url('kitty.png');
 
  background-size: 200px 200px;
 
  background-repeat: round;
 
  height: 100vh;
 
}

Die CSS-Eigenschaft background-position

Diese Eigenschaft wird verwendet, um die Position eines Bildes auf dem Bildschirm zu ändern.

Eine Katze im Engelsgewand singt „background-position“.

Die Syntax von background-position ist wie folgt:

.container {
// Die Reihenfolge ist X-Achse mal Y-Achse 
  background-position: 300px  200px;
 
}

Vergessen wir auch nicht, das Bild einzufügen, dessen Höhe festzulegen und die Bildwiederholung zu beenden. Wir haben die Größe des Kätzchens mit Hilfe der Eigenschaft background-size auf 200px X 200px festgelegt:

.container {
  background-image: url("kitty-idea.png");
 
  background-size: 200px 200px;
 
  background-repeat: no-repeat;
 
  // Die Reihenfolge ist X-Achse mal Y-Achse 
  background-position: 300px 200px;
 height: 100vh;
 }

Und das ist das Resultat:

Ein Kitty-Icon das um 300px nach rechts und 200px nach unten verschoben wurde.
In diesem Beispiel haben wir das Icon um 300px nach rechts und um 200px nach unten verschoben.

Darüber hinaus können auch eine Kombination aus diesen Werten verwenden:

  • top (nur Y-Achse)
  • left (nur X-Achse)
  • right (nur X-Achse)
  • bottom (nur Y-Achse)
  • sowie Prozentwerte

Als Beispiel wollen wir unser Kätzchen ganz unten rechts platzieren. Hier ist das Codeschnipsel dafür:

.container {
  background-image: url("kitty-idea.png");
 
  background-size: 200px 200px;
 
  background-repeat: no-repeat;
 

// In diesem Beispiel ist das Bild auf der Y-Achse unten und auf der X-Achse rechts ausgerichtet 
  background-position: bottom right;
 
  height: 100vh;
 
}
Ein Kitty-Icon das um 300px nach rechts und 200px nach unten verschoben wurde.
Bei den Werten top, left, bottom oder right spielt die Reihenfolge der Syntax keine Rolle für die Zuordnung der Werte, sie gelten immer nur für die Y- oder die X-Achse.

Bei der Berechnung des verfügbaren Platzes auf dem Bildschirm bestimmen die %-Werte die Position des Bildes. So sieht es im Code aus:

.container {
  background-image: url("kitty-idea.png");
 
  background-size: 200px 200px;
 
  background-repeat: no-repeat;
 
  // Die Reihenfolge ist X-Achse mal Y-Achse 
  background-position: 25% 15%;
 
  height: 100vh;
 }

Und so sieht das Ergebnis aus:

Das Kitty-Icon ist in der Höhe um 15% nach unten und in der Breite um 25% nach rechts eingerückt.
Das Kitty-Icon ist in der Höhe um 15% nach unten und in der Breite um 25% nach rechts eingerückt.

Die CSS-Eigenschaft background-origin

Diese Eigenschaft legt fest, wie sich das Hintergrundbild in der es umgebenden Box verhält. Klingt abstrakt, drei Beispiele kommen aber sogleich.

Titelbild Background-Origin.

Hier das dazugehörige CSS:

.container {
  background-origin: border-box;
 
}

Dessen drei mögliche Werte sind:

  • border-box
  • padding-box (Standardwert)
  • content-box

Beim Standard-CSS-Box-Modell ist der äußerste Teil der Rahmen. Danach kommt das Padding und schließlich der eigentliche Inhalt in der Mitte.

Im CSS Box-Modell kommt aussen die Border, dann das innere Padding und dann der „Content“.
Im CSS Box-Modell kommt aussen die „Border“, dann das innere Padding und dann der „Content“.

Je nachdem, wie man also background-origin definiert, kommen dabei folgende Resultate heraus:

Ein und dasselbe Bild im Verhältnis zur es umgebenden Box.
In den drei verschiedenen Varianten geht das Hintergrundbild wahlweise bis rein in den Rand (die Border), nur bis zum inneren Padding oder die Hintergrundposition ist relativ zum Inhalt. Padding-Box ist der Standardwert, sofern nichts anderes definiert ist.

Um diese Ergebnisse zu erzielen:

  • brauchen wir zuerst ein Bild,
  • wir müssen die Bildwiederholung stoppen und die Höhe und Breite sowohl des Containers als auch des Bildes festlegen.
  • Sobald dies geschehen ist, werden wir 40px Padding einfügen, sonst können wir nicht sehen, den Unterschied zwischen dem Padding-Box und der Content-Box.
  • Dann fügen Sie einen roten Rahmen von 25 px ein. Setzen Sie den border-style auf dashed, um einen gestrichelten Rahmen auf dem Bildschirm zu erhalten.
  • Setzen Sie die Hintergrundgröße auf 640px X 959px

Im CSS sieht das dann so aus:

.container {
 
  background-image: url('cute-girl.jpg');
 
  background-repeat: no-repeat;
 
  background-size: 640 959px;
 
  background-origin: content-box;
 
  padding: 40px;
 
  border: 25px solid red;
 
  border-style: dashed;
 
  width: 500px;
 
  height: 700px;
 
}

Die CSS Eigenschaft background-clip

Das Titelbild zu CSS Background-Clip.

Background-Clip beschneidet das Hintergrundbild, je nachdem welchen Rahmen man für das Bild festlegt:

.container {
  background-clip: border-box;
 
}

Die drei Werte von background-clip sind:

  • border-box
  • padding-box
  • content-box

Je nachdem, wie man also background-clip definiert, kommen dabei folgende Resultate heraus:

Ein und dasselbe Bild im Verhältnis zur es umgebenden Box.
Auch hier ist der Standardwert Padding-Box.

Um diese Ergebnisse nachzubilden:

  • brauchen wir ein Bild, müssen die Bildwiederholung stoppen, und die Höhe und Breite sowohl des Containers als auch des Bildes festlegen.
  • Sobald dies geschehen ist, werden wir 40px Padding einfügen, sonst werden wir nicht in der Lage sein, den Unterschied zwischen dem Padding-Box und Content-Box zu sehen.
  • Dann fügen Sie einen roten Rahmen von 25 px ein. Setzen Sie den border-style auf dashed, um den gestrichelten Rahmen auf dem Bildschirm zu sehen.
  • Setzen Sie die Hintergrundgröße auf 640px & 959px

Der Code sieht wie folgt aus:

.container {
 
  background-image: url('cute-girl.jpg');
 
  background-repeat: no-repeat;
 
  background-size: 640 959px;
 
  background-clip: border-box;
 
  padding: 40px;
 
  border: 25px solid red;
 
  border-style: dashed;
 
  width: 500px;
 
  height: 700px;
 
}

Die CSS-Eigenschaft background-attachment

Titelbild Background-attachment.

Mit dieser Eigenschaft können wir das Verhalten unseres Inhalts und Bildes beim Scrollen steuern:

.container {
  background-attachment: scroll;
 
}

Die drei möglichen Werte von background-attachment sind:

  • scroll
  • fixed
  • local

Wenn wir scroll verwenden, ist das Bild fixiert und wir können unseren Inhalt frei verschieben. Der feste Wert gibt uns einen Parallax-Effekt beim Scrollen mit der Maus und erzeugt lokal mehrere Bilder, solange unser Inhalt nicht endet.

Hier das Ergebnis (Link zu Codepen):

Das Hintergrundbild mit Blick auf eine Bucht am Meer wird eingesetzt, um einen Parallax-Effekt zu erzeugen.

Die CSS-Eigenschaft background-color

Titelbild für „background-color“

Mit Sicherheit eine der am häufigsten verwendeten Hintergrundeigenschaften. Mit ihr lässt sich die Farbe des Hintergrunds eines Elements ändern. Die Farbe kann als Farbname (z.B. „red“) oder in rgb-, hsl- oder hex-Schreibweise angegeben werden:

.container {
  background-color: red;
 
}

als Hex-Wert:

.container {
  background-color: #ff0000;
 
}

als rgb() – Wert:

.container {
  background-color: rgb(255, 0, 0);
 
}

Oder wir können rgba() verwenden, um sowohl die Farbe als auch die Deckkraft wie folgt festzulegen:

.container {
// Die 0.5 am Ende steht für 50% Deckkraft 
  background-color: rgba(99, 110, 114, 0.5);
 
}

Hier ein Experiment mit der Farbe „Eton blue“ mit verschiedenen Deckkraftstufen:

die Farbe Eton Blue in verschiedenen Deckkraftstufen.

und zu guter letzt als linear-gradient() (deutsch: linearer Farbverlauf), hierfür wird allerdings nicht background-color sondern background-image oder einfach nur background verwendet:

.container {
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
 
}

So legen wir den Farbverlauf mit linear-gradient() fest

Wir können diese Eigenschaft verwenden, um einen Farbverlauf mit mehr als einer Farbe zu erstellen. Hier sind einige Beispiele für Farbverläufe:

6 Farbverläufe die mit background-image: linear-gradient() erstellt wurden.
Mehr zum Thema Tools für Farbverläufe

Nun zum konkreten Beispiel. Wir wollen diesen Hintergrund-Farbverlauf mit background-image: linear-gradient() nachbilden:

Der Farbverlauf „Summer“.

Das ist unser Codeschnipsel:

.container {
  background: linear-gradient(90deg, #22c1c3, #fdbb2d);
 
}

Die Syntax für Hintergrundbilder in der Kurzform

Im folgenden Beispiel verwenden wir kitty.png auf blauem Hintergrund bei 200px auf der X-Achse und 200px auf der Y-Achse. Der Codeschnipsel sieht wie folgt aus:

.container {
  background-color: skyblue;
 
  background-image: url('kitty.png');
 
  background-repeat: no-repeat;
 
  background-attachment: fixed;
 
  background-position: 200px 200px;
 
  height: 100vh;
 
}

Und die Kurzform (a.k.a. „Shorthand“) davon sieht so aus:

.container {
  background: skyblue url('kitty.png') no-repeat fixed 200px 200px;
 
  height: 100vh;
 
}

Diese Kurzform spart uns gleich mehrere Zeilen Code. Wichtig ist es, die Reihenfolge dieser Werte beizubehalten, sonst funktionieren die Angaben nicht mehr. Das Ergebnis sieht dann so aus:

Eine süße Katzenillustration auf blauem Hintergrund im Safari-Browser.

Ein Wort zu Ladezeiten

CSS Hintergrundbilder sind grundsätzlich unvorteilhaft, wenn es um Website-Ladezeiten geht. Sie sind nicht direkt im Markup einer Website enthalten, sondern werden über das CSS ausgeliefert. Das bedeutet, dass erst das CSS geladen sein muss, bevor das Hero Image abgerufen werden kann.

Wenn Du jedoch nicht auf CSS Background Images verzichten kannst, solltest Du folgendes HTML zum Header Deiner Website hinzufügen, sodass der Browser das Hintergrundbild schneller laden kann:

<link 
   rel="preload"
   href="https://drweb.de/wp-content/themes/child-theme/images/name-des-hero-images.webp"
   as="image"
   fetchpriority="high" />
  
</head>

Fazit

Wir hoffen, dass diese Einführung zum besseren Verständnis dieses Themas beiträgt und dem einen oder der anderen als Nachschlagewerk dienen kann.

Dieser Artikel wurde aus dem Englischen übertragen,  technisch editiert und am 14. Sept. 2021 veröffentlicht. Der Artikel erschien zuerst auf Freecodecamp.

Verwendetes Bildmaterial:

Wie hilfreich fanden Sie diese Seite?

Durchschnittliche Bewertung 4.8 / 5. Anzahl Bewertungen: 6

Ähnliche Beiträge

2 Kommentare

  1. > Der Wert background-repeat: repeat-x

    Das Bild darunter zeigt nicht „repeat-x“.

    > Der Wert background-repeat: round

    Im CSS steht „background-repeat: no-repeat;“ statt „background-repeat: round;“.

    > Die CSS Eigenschaft background-clip

    Macht „background-clip“ dasselbe wie „background-origin“?

    Weil das Bild mit der Frau lässt das vermuten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert