Hintergrundbilder als Gestaltungselement
Formatfüllendes Hintergrundbild

DeveloperIT-ProjekteSoftware

Je einfacher eine Gestaltung, desto größer die Wirkung. Mit nur einem großen Hintergrundbild und gut darauf verteiltem Inhalt lässt sich eine überzeugende Website realisieren.

Abheben von der Masse

Hintergrundbilder als Gestaltungselement

Wer an große Hintergrundbilder denkt, denkt zuerst an lange Ladezeiten. Ein per CSS platziertes Hintergrundbild wird im Browser aber erst angezeigt, wenn es geladen ist, der Rest ist bis dahin schon längst sichtbar. Außerdem kommt das Standardargument dazu, dass immer mehr Nutzer mittlerweile eine schnellere Leitung besitzen. Bleibt die Frage: Was bieten große Hintergrundbilder aus gestalterischer Sicht?

Ein großes Hintergrundbild wirkt meist recht dominant. Je weniger Inhalte darübergelagert sind, desto besser kommt es zur Geltung. Erfolgreich eingesetzt hat dieses Konzept die Agentur Less Rain (www.lessrain.com). Nun ist eine Design-Agentur natürlich nicht stellvertretend für besonders viele Seitengattungen. Sie muss sich eher vom Rest abheben und kann damit auch neue Wege gehen. Das heißt aber nicht, dass große Hintergrundbilder nicht auch für andere Seiten geeignet wären. Auch der Bekleidungsanbieter Quiksilver (www.quiksilver.com) verwendet seinen Schriftzug als überdimensionalen Seitenhintergrund. Und in der Online-Werbung gab es in letzter Zeit mehrere Kampagnen, die ein großes Bild über verschiedene Banner auf einer Seite verteilt haben.

Aus der Gestalterperspektive sind große Hintergrundbilder zum einen eine Fortführung der Hintergrundverläufe und -muster (siehe auch Ausgabe 1/2006, Seite 56). Zum anderen steckt darin auch der Gedanke, dass im Web im Moment alles ein wenig wächst: Die Schrift wird größer, die Auflösungen und die Bilder werden größer. Gigantische Hintergrundbilder sind ein vorläufiger Höhepunkt in dieser Entwicklung.

Es wäre verfrüht, bei großen Hintergrundbildern von einem Trend auszugehen, der sich in der Allgemeinheit, sprich auf Nachrichtenportalen und Unternehmens-Websites, durchsetzt. Es handelt sich um eine gestalterische Möglichkeit, mit der designorientierte Websites einen Kontrapunkt zur Masse der gleichförmigen Web-Auftritte setzen können. In diesem Workshop lesen Sie, wie eine Gestaltung mit großem Hintergrundbild aussehen könnte. Dabei entwickeln Sie eine fiktive Seite zum Thema Raster.


Vorüberlegungen

Hintergrundbilder als Gestaltungselement

Bei designlastigen Websites spielt Flash eine große Rolle. So verwendet Quiksilver beispielsweise nach der Sprachwahl komplette Flash-Filme, und auch die Agentur Less Rain setzt auf Flash. Für große Hintergrundbilder sind prinzipiell beide Varianten denkbar: eine Flash-Website und eine CSS-Website. Dieser Workshop beginnt mit CSS und zeigt dann, welche Möglichkeiten Flash bietet.

Da das Thema Raster lautet, ist ein Bild mit einer Struktur oder einem regelmäßigen Motiv natürlich am besten geeignet. Die Wahl fällt hier auf ein architektonisches Motiv einer Stahlkonstruktion. Wenn ein Design Fotografien als zentrales Element auf der Hauptseite verwendet, sind Stock-Fotos von einem der vielen Bilderanbieter nicht unbedingt geeignet. Sie sollten hier Wert auf eine individuelle Gestaltung legen und diesen Anspruch nicht mit einem tausendfach verwendeten Bild konterkarieren.


Grundgerüst

Hintergrundbilder als Gestaltungselement

Nach der Wahl des Hintergrundbilds geht es um die Inhalte. Ausgangspunkt für die HTML-Seite ist ein Layout in Photoshop. Das HTML-Grundgerüst steht schnell. Die Navigation landet in einem eigenen div-Block, gefolgt von der jeweiligen Seitenüberschrift. Der eigentliche Inhalt besteht aus einem Foto und einer Liste mit Text, die jeweils noch Links enthält:


raster

Raster-Foto

Die Navigation ist in Spalten organisiert. Jedes Navigationselement besteht aus einem Bild für die erste Navigationsebene und darunter den Elementen der zweiten Ebene. Der aktive Bereich wird über eine ID hervorgehoben:



Projekte

raster

material

transparenz


CSS-Formatierung

Hintergrundbilder als Gestaltungselement

Für die Formatierung sorgt CSS. Das Hintergrundbild wird eingebunden und die Hintergrundfarbe auf einen Wert gesetzt, der im Bild vorkommt.


body {
margin: 0px;
padding: 0px;
background-image: url(Raster_HG_Q4.jpg);
background-color: #44534f;
background-repeat: no-repeat;
font-family: Verdana, sans-serif;
color: white;
}

Die Spalten der Navigation entstehen mit display:block. Mit float:left ordnen Sie sie nebeneinander an. Den Abstand definieren Sie mit margin-right:


.naviele {
display: block;
float: left;
margin-right: 30px;
}

Die Positionierung der Elemente über dem Hintergrundbild kann über absolute Positionierung erfolgen. Genauso exakte Ergebnisse und mehr Kontrolle liefert die Positionierung über die Abstände:


#navigation {
margin-left: 50px;
}

Selbiges geschieht auch mit dem Inhalt


#inhalt {
background-color: #44534f;
padding: 20px;
margin-left: 50px;
width: 1180px;
}

und mit der h1-Überschrift:


h1 {
margin-left: 70px;
margin-top: 50px;
margin-bottom: 2px;
font-weight: normal;
font-size: 3em;
letter-spacing: 0.1em;
}

Bei den übrigen Formatierungen ist vor allem ein ausreichender Farbkontrast zwischen dem Vordergrund und dem Hintergrundbild notwendig. In diesem Fall ist die Navigation weiß und die Links sind nicht unterstrichen.


a {
text-decoration: none;
color: white;
font-weight: bold;
}

Die Links in der Navigation sind speziell noch ein wenig eingerückt und nicht fett. Außerdem werden Sie mit dem letter-spacing ein wenig gesperrt:


.naviele a {
margin-left: 5px;
font-size: 0.8em;
font-weight: normal;
letter-spacing: 0.1em;
}

Das Sperren der Schrift führt zur besseren Lesbarkeit, da die Buchstaben mehr Luft haben und vom Leser besser erfasst werden. Allerdings sollten Sie darauf achten, dass Text bei zu großen Abständen leicht löchrig wirken kann. In diesem Fall verkehrt sich der ursprünglich auf gute Lesbarkeit abzielende Effekt ins Gegenteil und das Schriftbild zerfällt.


Bildoptimierung

Hintergrundbilder als Gestaltungselement

Beim Hintergrundbild selbst müssen Sie entscheiden, in welcher Qualität und Größe es erscheinen soll. Die Größe sollte so gewählt werden, dass das Bild auch bei großen Auflösungen noch flächendeckend ist. Für das vorliegende Beispiel sind 1600×1200 Pixel eine gute Wahl. Hat der Nutzer einen Monitor mit höherer Auflösung, sollte die Hintergrundfarbe passend zum Bild gewählt sein. Eine horizontale oder vertikale Bildwiederholung scheidet in diesem Beispiel aus.

Als Bildformat bietet sich bei einem Foto nur ein JPEG an. Sollten Sie eine Grafik wie Quiksilver verwenden, sind natürlich auch PNG-8 und GIF möglich. Prinzipiell gilt: Je größer das Bild, desto wichtiger die Bildoptimierung. Ein Foto in einer Auflösung von 1600×1200 Pixel ist nicht unter 100 KByte zu haben. Selbst mit Qualitätsstufe 1 von 10 sind es im vorliegenden Beispiel noch über 100 KByte. Hier muss der stetige Optimierer in den sauren Apfel beißen und sich mit der dreistelligen Zahl arrangieren. Im Detail gibt es dann aber natürlich Spielraum. Eine Qualitätsstufe 6 von 10 wäre zwar optimal, würde aber über 200 KByte in Anspruch nehmen. Wenn der Rest der Seite auch bei guter Bandbreite deutlich vor dem Bild angezeigt wird, ist die Gefahr groß, dass der Nutzer schon weiterklickt, bevor er Ihr tolles Bild überhaupt zu sehen bekommen hat.


Transparenzprobleme

Hintergrundbilder als Gestaltungselement

Im Beispiel wird für die Navigation Schrift als Grafik verwendet. An dieser Stelle zeigt sich ein Kernproblem im Web: Alphatransparenz wäre nur mit PNG-24 möglich, dies ist aber im Internet Explorer bis Version 6 nicht implementiert. Zwar gibt es einen Hack (webfx.eae.net/dhtml/pngbehavior/pngbehavior.html), der ist allerdings mit Javascript verbunden und wie die meisten Hacks keine absolut saubere Lösung. Daraus ergibt sich, dass der Designer entweder seine Schrift genau auf den Hintergrund anpassen oder mit der harten Transparenz von GIF und PNG-8 leben muss.

Im Workshop kommt eine Schrift von www.dafont.com zum Einsatz. Die Schrift mit dem Namen Quark ist für nichtkommerzielle Nutzung frei. An dieser Schrift sieht man das Transparenzproblem sehr gut. Arbeiten Sie ohne Alphatransparenz, wirkt die Schrift sehr hart und deutlich breiter. Setzen Sie sie vor den Hintergrund, ist der Übergang wesentlich weicher. Allerdings muss die Schrift vor dem Hintergrund dafür exakt platziert sein, und bei stärkerer Differenz zwischen GIF- und JPEG-Hintergrund sind die Übergänge sichtbar. Das Transparenzproblem erfordert in der Praxis viel Experimentieren. Quiksilver stellt seinen Schriftzug beispielsweise auf einen weißen Hintergrund und fügt den hell gestreiften Hintergrund dahinter ein. So sind die harten weißen Ränder des Schriftzugs für das bloße Auge kaum zu erkennen.


GIF-Bewegung

Hintergrundbilder als Gestaltungselement

Das Transparenzproblem zeigt sich auch bei einer einfachen GIF-Animation für die Home-Schaltfläche. Die GIF-Animation ist in den letzten Jahren immer mehr in den Hintergrund gerückt. Für kleine Effekte eignet sich der Veteran allerdings immer noch. Und gerade wenn ein Hintergrundbild im Vordergrund steht und ansonsten nur wenig und klar strukturierter Inhalt die Aufmerksamkeit des Lesers bindet, kann eine kleine GIF-Animation für Interesse sorgen. Bei GIF-Animationen gilt natürlich auch das Transparenzproblem, da der GIF-Standard 89a nur harte Transparenz unterstützt. Das heißt, es gibt nur transparente oder nicht transparente Pixel.

Auch hier besteht als Lösung die Möglichkeit, den fraglichen Teil des Hintergrunds einfach in die Animation zu integrieren oder ihn transparent zu lassen und mit den harten Übergängen zu leben. Im Beispiel stören die harten Übergänge nicht, sondern sind geschickt in das Erscheinungsbild der Grafik integriert. Wenn Sie den Hintergrund verwenden, wird die Animation deutlich größer, da seine verschiedenen Farbwerte mit gespeichert werden müssen.


Für Anspruchsvolle: Flash

Hintergrundbilder als Gestaltungselement

Sollen die Animationen etwas komplexer werden, reichen GIF-Animationen natürlich nicht mehr aus. In diesem Fall bietet sich Flash an. Flash hat noch einen weiteren Vorteil: Es unterstützt Alphatransparenz. Das Hintergrundbild packen Sie einfach per CSS in die HTML-Datei, in der der Flash-Film steckt:


body {
margin: 0px;
padding: 0px;
background-image: url(Raster_HG_Q4.jpg);
background-color: #44534f;
background-repeat: no-repeat;
}

Der Flash-Film selbst muss einen transparenten Hintergrund haben. Dies können Sie in den Einstellungen für Veröffentlichungen (Menü Datei) unter HTML beim Fenstermodus festlegen. Die zugehörige Option heißt Durchsichtig ohne Fenster. Flash schreibt in die HTML-Datei in das object-Tag den Parameter mit dem Namen wmode:

<

Für die zweite Alternative, das embed-Tag, gibt es denselben Parameter als Attribut:

wmode="transparent"

Fertig ist die perfekte Alphatransparenz, die auch für Animationen gilt. Und noch ein kleiner Tipp: Wenn Sie wie im vorliegenden Beispiel mit weißer Schrift arbeiten, sollten Sie in Flash einen dunklen Hintergrund in den Einstellungen für das Dokument wählen (Menü Modifizieren, Dokument oder im Eigenschafteninspektor). Da er sowieso nicht angezeigt wird, sehen Sie so die Wirkung des Effekts besser. Alternativ können Sie auch das Hintergrundbild auf die unterste Ebene des Flash-Films packen.