Webdesign

Effekte mit background

CSS bietet die Möglichkeit, Grafiken aus dem Fluss des HTML-Dokuments herauszunehmen und sie einzelnen Elementen als Hintergrundbilder zuzuweisen.
Durch diese Technik stehen unzählige Gestaltungsvarianten offen. Hier sollen nun einige beleuchtet werden, die für die Layoutgestaltung einer Seite interessant sind.

Was wird behandelt?

In diesem Tutorial werden zwei Anwendungen für Layouteffekte mit dem background-Element vorgestellt.

• Variationen von Linien für das Seitenlayout
• Feststehende Hintergrundbilder

Dann also ans Werk!

Anwendung 1: Variationen von Linien

In CSS kann man durch das border-Element Striche verschiedener Dicke sowie gestrichelte, gepunktete und einige andere Linien zeichnen. Manchmal wird das aber einfach zu langweilig und man möchte etwas gestalten, woran das Auge des Besuchers ein wenig haften bleibt. Das geht sehr leicht mit dem background-Element (ein erstes Beispiel für eine solche Linie sehen Sie rechts von diesem Text).

Um eine grafisch etwas anspruchsvollere Linie zu ziehen, brauchen wir eine kleine Grafik, die per CSS dann in x- oder y-Richtung wiederholt wird.

Eine solche Grafik für eine vertikale Linie könnte z.B. so aussehen: . Mit dieser Grafik können wir den linken Navigationsbereich einer Seite optisch von Hauptinhaltsbereich trennen, wie das im ersten Beispiel gemacht ist. Die Navigation befindet sich in einem div, das die id "nav" trägt.

Der CSS-Code für diese Anwendung ist ganz einfach:

1. #nav {
2. background:url(bg_bsp1.gif) 100% 0% repeat-y;
3. }
4. Code-Download: /code/tut-bg-01.txt

Die Schreibweise für das background-Element ist eine Kurzform, die die Angaben für background-image, background-position und background-repeat enthält. Im Einzelnen bedeutet das CSS folgendes:

Das Hintergrundbild soll bg_bsp1.gif sein, es soll in horizontaler Richtung ganz rechts positioniert werden (100%) und in vertikaler Richtung ganz oben (0%). Das Bild soll in vertikaler Richtung wiederholt werden, so dass es das ganze Element ausfüllt (repeat-y). Die Angabe zur vertikalen Position könnten wir uns sparen, weil repeat-y genauso wie repeat-x immer in beide Richtungen angewandt wird. Weil aber die Regel mit nur einer Positionsangabe unvollständig wäre, schreiben wir die 0% dazu.

Natürlich kann man dieses Prinzip auch horizontal anwenden, wie im zweiten Beispiel. Die Grafik sieht so aus: (die ist nicht schön, ich weiß, soll aber ja auch nur das Prinzip verdeutlichen).

Der CSS-Code ist dem vorhergehenden sehr ähnlich, lediglich die repeat-Richtung und die Positionierung sind anders.

1. #header {
2. background:url(bg_bsp2.gif) left bottom repeat-x;
3. }
4. Code-Download: /code/tut-bg-02.txt

Zu beachten ist, dass man für die Positionierung Prozentangaben und Positionsstichwörter (top, left etc.) nicht mischen darf. Also immer nur Stichwörter alleine oder aber Prozentangaben oder aber absolute Werte in Pixeln. Prozent- und Pixelangaben dürfen gemischt werden.

Anwendung 2: Feststehende Hintergrundbilder

Ein Element aus der background-Familie haben wir in den bisher gezeigten Kurzschreibweisen noch gar nicht angesprochen: background-attachment.

Damit legt man fest, ob ein Hintergrundbild sich mit seinem Element bewegen soll, wenn der Anwender die Seite scrollt oder ob es immer an seinem Platz verharrt. Im zweiten Fall ist das Browserfenster das Bezugssystem für die Positionsangaben unabhängig von den Elementen der HTML-Datei.

In den beiden oberen Beispielen haben wir einfach den in den Browsern voreingestellten Wert von background-attachment verwendet und mussten ihn daher nicht explizit schreiben. Die Voreinstellung lässt Hintergrundbilder mit ihren Elementen mitscrollen, die CSS-Deklaration würde ausgeschrieben so aussehen:

1. background-attachment:scroll;
2. Code-Download: /code/tut-bg-03.txt

Nun möchten wir aber die feststehende Variante verwenden und damit einen Effekt wie im Beispiel 3 erzeugen. Wiederum sorgt eine einfache CSS-Regel für diesen Effekt.

1. body {
2. background: #F1EDCF url(bg_bsp3.gif) bottom right no-repeat fixed;
3. }
4. Code-Download: /code/tut-bg-04.txt

Das <body>-Tag bekommt alle Angaben zum Hintergrund: zuerst die Hintergrundfarbe, dann den Dateinamen der Grafik, die Positionsangaben. no-repeat bedeutet, dass die Grafik nicht wiederholt (d.h. nicht gekachelt) wird und schließlich das Wichtigste: fixed sorgt dafür, dass die Grafik beim Scrollen immer in der rechten unteren Ecken klebt und der Rest des Dokuments sich darüber hinweg bewegt.

Fertig

Die vorgestellen Anwendungen sollten die Grundprinzipien der Gestaltung mit dem background-Element verdeutlichen. Natürlich lassen sich mit Kombinationen verschiedener background-Elemente von mehreren Seitenelementen weitaus anspruchsvollere Effekte erzielen, als die grundlegenden Beispiele dieses Tutorials. Lassen Sie Ihrer Phantasie freien Lauf!

Zuletzt geändert am 02.03.2006

Fehler gefunden?

Sagen Sie mir Bescheid!