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, Standardwertfixed
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 obenbottom
bündig nach untencenter
zentriertleft
bündig nach linksright
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-Elementsrepeat-y
kachelt das Bild vertikal über die gesamte Höhe des HTML-Elementsno-repeat
das Bild wird nicht gekachelt, sondern nur einmal angezeigt
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt