CSS - Elemente - Hintergrund

1. background

Bei der Kurzschreibweise müsst ihr wie bei list-style auf keine Reihenfolge achten, da die Werte jeweils einzigartig sind und dementsprechend vom Browser automatisch interpretiert werden.

2. background-attachment

Setzt die Eigenschaft des Hintergrundbildes beim scrollen fest.

• scroll Bild scrollt mit, Standardwert
• fixed Hintergrundbild bleibt stehen

3. background-color

Definiert die Hintergrundfarbe eines Elements. Erlaubt sind ...? Natürlich Farbangaben und zusätzlich transparent als Standardwert.

4. background-image

Hiermit bindet man ein Hintergrundbild ein. Wenn ein relativer Pfad angegeben werden soll, so muss sich das Bild relativ zum Ort der CSS-Definition bzw. -datei befinden, in der die Anweisung vorgenommen wurde! Die Syntax sieht wie folgt aus:

body
{
  background-image: url(bilder/background.gif);
}

Achtet darauf, dass sich zwischen url und der öffnenden Klammer KEIN Leerzeichen befindet, ansonsten kann das Bild nicht gefunden werden.

5. background-position

Legt die Position des Hintergrundbildes fest. Dabei werden zwei Werte angegeben, einmal die obere linke und die obere vertikale Position: Erlaubt sind hierbei numerische Werte sowie die folgenden Angaben:

• top bündig nach oben
• bottom bündig nach unten
• center zentriert
• left bündig nach links
• right bündig nach rechts

.rahmen
{
  background-image: ...;
  background-repeat: ...;
  background-position: left top;
}

6. background-repeat

Hiermit wird die Darstellung des Hintergrundbildes definiert. Es gibt dabei 4 Optionen.

• repeat kachelt das Bild sowohl horizontal als auch vertikal über die gesamte Fläche des HTML-Elements. Ist der Standardwert.
• repeat-x kachelt das Bild horizontal über die gesamte Breite des HTML-Elements
• repeat-y kachelt das Bild vertikal über die gesamte Höhe des HTML-Elements
• no-repeat das Bild wird nicht gekachelt, sondern nur einmal angezeigt

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt