Hintergrund und Hintergrundbild
In css können sowohl für die gesamte Seite (<body> Bereich) als auch für einzelne Paragraphen oder Tabellen mit Hilfe des Befehls background-image: url(XX) Hintergrundbilder definiert werden. Für das entsprechende Hintergrundbild können folgende Eigenschaften (u.a. Positionierung und Ausrichtung) definiert werden:Wiederholung des Hintergrundbildes festgelegt in CSS
background-repeat: repeat | repeat-x | repeat-y | no-repeat
repeat legt die Wiederholung des Bildes sowohl horizontal als auch vertikal fest, repeat-x dagegen nur die horizontale, repeat-y die vertikale Wiederholung. Mit Hilfe von no-repeat wird das Bild im Hintergrund nur einmal angezeigt.
repeat legt die Wiederholung des Bildes sowohl horizontal als auch vertikal fest, repeat-x dagegen nur die horizontale, repeat-y die vertikale Wiederholung. Mit Hilfe von no-repeat wird das Bild im Hintergrund nur einmal angezeigt.
Positionierung des Hintergrundbildes in CSS
background-position: [<Prozentwert> |
<Längenangabe>]{1,2} | [top | center | bottom] | [left | center | right]
top, center, bottom definieren die horizontale Ausrichtung des Hintergrundbildes, left | center | right dagegen die vertikale Ausrichtung.
Die vertikale und horizontale Ausrichtung kann auch mit Hilfe von Prozentangaben festgelegt werden, wobei background-position: 50% 50%; das Bild zentriert. Der horziontale Wert wird zuerst genannt.
Absolute Angaben wie z.B. background-position: 100px 200px; beziehen sich bei der Positionierung immer auf den linken bzw. oberen Rand des Elementes.
Prozentuale und absolute Werte können für die Ausrichtung des Hintergrundbildes auch kombiniert werden: background-position: 50% 200px;
background-attachment: scroll | fixed
Fixieren des Hintergrundbildes
top, center, bottom definieren die horizontale Ausrichtung des Hintergrundbildes, left | center | right dagegen die vertikale Ausrichtung.
Die vertikale und horizontale Ausrichtung kann auch mit Hilfe von Prozentangaben festgelegt werden, wobei background-position: 50% 50%; das Bild zentriert. Der horziontale Wert wird zuerst genannt.
Absolute Angaben wie z.B. background-position: 100px 200px; beziehen sich bei der Positionierung immer auf den linken bzw. oberen Rand des Elementes.
Prozentuale und absolute Werte können für die Ausrichtung des Hintergrundbildes auch kombiniert werden: background-position: 50% 200px;
background-attachment: scroll | fixed
Fixieren des Hintergrundbildes
Diese Angaben können in CSS kombiniert werden, so dass das Hintergrundbild entsprechend in das Webseitendesign eingepaßt werden kann. So macht z.B. die Wiederholung des Hintergrundbildes Sinn, wenn dieses ein Muster ist und relativ klein. Dadurch wird erreicht, dass dies nur einmal vom Nutzer geladen werden muss, dennoch flächendeckend dargestellt wird.
Dagegen macht bei Fotos eine Wiederholung des Hintergrunds meist keinen Sinn.
Beispiel - Definition in CSS
body {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}
Hintergrundfarbe
Mit Hilfe von background-color kann in css die Hintergrundfarbe definiert werden, unabhängig davon, ob dies die Hintergrundfarbe eines Fließtextes oder eines Links ist.