CSS: Farbe und Hintergrundgestaltung

Die Gestaltung von Dokumenten und Seiten kann einerseits durch Farben (z.B. Textfarbe) und andererseits durch die Gestaltung des Hintergrundes weiter verfeinert und verbessert werden. Auch CSS unterstützt diese Formen der Gestaltung. Dazu wurden die folgenden Eigenschaften definiert:

color

Die color-Eigenschaft beschreibt die (Vordergrund-)Farbe des in einem Element enthaltenen Textes. Als Wert wird dazu der Wert der Farbe, der Farbname oder eine andere Farbangabe notiert. Beispiel:

BODY { color: black; }
H1 { color: '#ff0000'; }
H2 { color: rgb(0,0,255); }

background-attachment

Die background-attachment-Eigenschaft definiert, wie ein Hintergrundbild eingepasst wird. Als Wert stehen 2 Varianten zur Verfügung: scroll besagt, dass das Hintergrundbild mit verschoben werden soll, wenn die Seite bzw. das Element gescrollt wird (Voreingestellt). fixed besagt, dass das Hintergrundbild am gleichen Platz stehen bleiben soll.
Beispiel:

BODY { background-attachment: fixed;
background-image: url('name.gif'); }

background-color

Zum Bestimmen der Hintergrundfarbe eines Elements dient die background-color-Eigenschaft. Als Wert wird hier eine Farbe oder transparent notiert. transparent bedeutet, dass die Farben des darunterliegenden Elements angenommen werden bzw. das Element durchscheinend ist. Beispiel:

BODY { background-color: '#ff0099'; }
P { background-color: transparent; }

background-image

Das Hintergrundbild eines Elements wird mit der background-image-Eigenschaft definiert. Als Wert muss entweder die URL eines Bildes oder none notiert werden. none beschreibt, dass kein Bild dargestellt werden soll. Beispiel:

BODY { background-image: none; }
DIV { background-image: url('name.jpg'); }

background-position

Die background-position-Eigenschaft beschreibt, wo (an welcher Stelle des Elementhintergrundes) sich das Hintergrundbild befinden soll. Dazu wird ein Wertepaar notiert. Der erste Wert dieses Paares bestimmt dabei die horizontale Ausrichtung; der zweite Wert die vertikale Ausrichtung. Beide Werte setzen an der linken oberen Ecke des Elements ihren Nullpunkt. Als Werte dieses Wertepaares können die folgenden notiert werden:

Prozentangabe - Richtet das Hintergrundbild prozentual an der Elementfläche (horizontal oder vertikal) aus.
Länegmaße - Richtet das Hintergrundbild mit dem definierten Abstand (horizontal oder vertikal) aus.
center - Richtet das Hintergrundbild mittig (horizontal oder vertikal) aus.
bottom - Richtet das Hintergrundbild am unteren Rand des Elements aus. (nur vertikal)
left - Richtet das Hintergrundbild am linken Rand des Elements aus. (nur horizontal)
right - Richtet das Hintergrundbild am rechten Rand des Elements aus. (nur horizontal)
top - Richtet das Hintergrundbild am oberen Rand des Elements aus. (nur vertikal)

Die (logische) Kombination dieser Werte als ein Wertepaar bestehend aus horizontaler und vertikaler Angabe ist möglich. Werden Prozent- oder Längenangaben getätigt, muss der horizontale Wert als erstes stehen. Ist dies nicht der Fall, können die Werte vertauscht werden. Einige Beispiele für Kombinationen dieser Werte:

left top oder top left gleichbedeutend mit 0% 0%
right top oder top right gleichbedeutend mit 100% 0%
center oder center center gleichbedeutend mit 50% 50%
right bottom oder bottom right gleichbedeutend mit 100% 100%

Des Weiteren können auch Prozent- mit Längen- oder Richtungsangaben kombiniert werden. Beispiel:

BODY { background-position: 27% 3cm; }
P { background-position: right 88%; }
TABLE { background-position: 3cm bottom; }

background-position-x und background-position-y

Die Eigenschaften background-position-x und background-position-y gehören zu den eigens von Microsoft eingeführten Eigenschaften. Mit ihnen ist die Ausrichtung des Hintergrundbildes möglich. Mit background-position-x kann die horizontale Ausrichtung, genauer gesagt den Abstand zur linken Seite, des Hintergrundbildes bestimmt werden. background-position-y bestimmt die vertikale Ausrichtung; also den Abstand nach oben. Als Wert können die folgenden dienen:

Längenangabe - Definiert den genauern Abstand des Hintergrundbildes
Prozentangabe - Definiert den Abstand in Prozent der Objektbreite bzw. -höhe
center - Ausrichtung in der Mitte
left - Ausrichtung am linken Rand (Nur bei background-position-x).
right - Ausrichtung am rechten Rand (Nur bei background-position-x)
bottom - Ausrichtung am unteren Rand (Nur bei background-position-y)
top - Ausrichtung am oberen Rand (Nur bei background-position-y)

Beispiel:

background-repeat

Die background-repeat-Eigenschaft beschreibt, ob und wie das Hintergrundbild wiederholt werden soll. Als Werte stehen die folgenden zur Auswahl:

no-repeat - Das Hintergrundbild wird einmal an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer als das Bild, so wird der Rest des Anzeigebereichs mit der Hintergrundfarbe bzw. dem darunterliegenden Element gefüllt.
repeat - Das Hintergrundbild wird an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer, so wird das Bild horizontal und vertikal dazu kopiert/angesetzt. Das Bild wird so oft wiederholt, bis der Anzeigebereich gefüllt ist.
repeat-x - Das Hintergrundbild wird an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer, so wird das Bild nur horizontal dazu kopiert/angesetzt. Das Bild wird so oft wiederholt, bis es den Anzeigebereich einmal horizontal vollständig durchläuft. Der Rest des freien Anzeigebereiches wird mit der Hintergrundfarbe bzw. dem darunterliegenden Element gefüllt.
repeat-y - Das Hintergrundbild wird an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer, so wird das Bild nur vertikal dazu kopiert/angesetzt. Das Bild wird so oft wiederholt, bis es den Anzeigebereich einmal vertikal vollständig durchläuft. Der Rest des freien Anzeigebereiches wird mit der Hintergrundfarbe bzw. dem darunterliegenden Element gefüllt.

Beispiel:

BODY { background-repeat: repeat-y; }
P { background-repeat: no-repeat; }

background

Die background-Eigenschaft ist ein Zusammenschluss aus den oben genannten Hintergrund-Eigenschaften (außer color). Sie dient dazu, alle Werte dieser Eigenschaften in Kurzform definieren zu können, ohne dazu die langen Eigenschaftsnamen mit notieren zu müssen. Als Werte wird der Wert einer oder mehrerer der o.g. Eigenschaften notiert. Die Werte werden dabei durch Leerzeichen voneinander getrennt. Die Reihenfolge sollte grundsätzlich egal sein, da es sich um unterschiedliche Werte-Arten handelt, eine geordnete Reihenfolge ist aber nicht minder gut. Die Reihenfolge sollte, wenn möglich, diesem Schema entsprechen:

background-color background-image background-repeat background-attachment background-position

Beispiel:

BODY { background: red url('name.gif') left 50%; }
P { background: transparent url('hinterg.gif') repeat-x; }

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Textgestaltung

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

CSS: Farbe und Hintergrundgestaltung

Über uns

Cookie-Einstellungen