Hintergrundbilder, Hintergrundfarben und Alphawerte

Hintergrundbild einer Seite

Betrachten wir als Beispiel diese recht einfache HTML-Seite. In dieser soll nun ein Hintergrundbild eingefügt werden. Dies geschieht komplett über CSS, daher ist im HTML-Code nichts über das Hintergrundbild zu sehen:

Das Hintergrundbild wird im Bereich body festgelegt. Dort wird es mit background-image: url(../Bilder/Lokrum.jpg); angegeben. Statt ../Bilder/Lokrum.jpg musst Du natürlich dann das Bild Deiner Wahl angeben.

Neben dem Bild selbst kann man noch einige weitere Angaben machen:

Sehen wir uns nun das Ergebnis im Browser an:

Wie wir besonders an der h2-Überschrift erkennen können, kann der Text durch ein Hintergrundbild schwer lesbar werden. Daher bietet es sich an, für den Text eine eigene Hintergrundfarbe festzulegen. Dies ist bei h1 geschehen und auch beim Tag p für normale Absätze.

Nun ergibt nich aber eine neue Schwierigkeit. Durch den weißen Hintergrund kann man das Bild kaum noch sehen. Das ist natürlich nicht unbedingt der Sinn eines Hintegrundbildes. Eine elegenate Lösung sehen wir uns später an. Nun Üben wir erst einmal das Einfügen eines Hintergrundbildes.

Übungsaufgabe

Erstelle eine HTML-Seite mit Hintergrund oder füge in einer Deiner schon erstellten Seiten ein Hintergrundbild ein.

Farben mit RGB-Code angeben

Eine Farbe kann in CSS mithilfe des RGB-Codes angegeben werden. Zum Beispiel kann man mit background-color:rgb(0,0,0); einen schwarzen Hintergrund erzeugen. Die drei Zahlenangaben in den Klammern geben den Rot-, Grün-, und Blauanteil der gewünschten Farbe an. Die Zahlenangaben dürfen im Bereich von 0 bis 255 liegen. Mit rgb(255,255,255); erhält man entsprechend Weiß.
Im folgenden Beispiel sieht man einige weitere Farbangaben. Du kannst nun vollkommen frei Farben mischen. Es lohnt sich aber, auf eine Farbtabelle wie diese hier zurückzugreifen, um gezielt eine bestimmte Farbe zu erzeugen.

Farben mit Alphawert angeben

In CSS ist es möglich neben dem Rot-, Grün-, und Blauanteil auch noch den Alphawert - also die Deckkraft - der Farbe anzugeben. Damit kannst Du zum Beispiel erreichen, dass das Hintergrundbild durch die Farbe hindurchscheint. Der Alphawert muss zwischen 0 und 1 liegen. Möchtest Du ihn verwenden, musst Du statt rgb die Angabe rgba verwenden. Zum Beispiel sorgt background-color: rgba(255,255,255,0.5); für einen weißen Hintergrund mit 50% Deckkraft.
Du kannst nicht nur die Hintergrundfarbe, sondern auch die Textfarbe mit Alphawert angeben und mit etwas Übung so interessante Farbeffekte erzielen.
Hier siehst Du ein Beispiel für verschiedene Kombinationsmöglichkeiten.

Übungsaufgabe

Modifiziere Deine Seite mit Hintergrundbild mit geeigneten Hintergrundfarben, um den Text lesbar zu machen und modifiziere die Alphawerte der Farben, um die Seite optisch ansprechend zu gestalten.

Textabschnitte mit <article> zusammenfassen

Vielleicht ist Dir aufgefallen, dass in dem Beispiel oben immer eine Lücke im Hintergrund zwischen den Überschriften und dem folgenden Text zu sehen ist. Selbst, wenn Du bei beiden dieselbe Hintergundfarbe verwendest, bleibt diese Lücke bestehen.
Um dies zu verhindern, kannst Du zum Beispiel vom weiteren Tag <article> </article> Gebrauch machen. Mit diesem kannst Du einen Abschnitt umschließen, der inhaltlich zusammen gehört. Zum Beispiel eine Überschrift mit den dazu gehörigen Absätzen.

Sehen wir uns ein Beispiel an.

Übungsaufgabe

Modifiziere Deine Seite mithilfe des Tags <article> </article>, um Lücken im Hintergrund zu vermeiden.