Startseite › tech.line

Spiel im Hintergrund

02.12.2009

CSS-Tricks mit Hintergrundbildern
Viele mit CSS realisierte Layouts bedienen sich ausgiebig bei Techniken, die Hintergrundbilder verwenden. Diese lassen sich für flexible Designs und raffinierte Effekte verwenden. Wir zeigen hier wie man mit Hintergrundbildern eine bessere Performance erreicht, Effekte mit fixen Hintergrundbildern erstellt und anderes.

Die Grundlage

Hintergrundbilder kann man allen Elementen zuweisen. Angenommen, man will Links, die eine bestimmte Klasse (.ico) haben, mit einem kleinen Symbol versehen. Dann kann man folgendes CSS-Beispiel verwenden:

.ico {
background-image: url(icon.gif);
background-repeat: no-repeat;
padding-left: 30px;
}

Bei background-image gibt man den Pfad zum Bild an. Normalerweise werden Bilder gekachelt. Bei einem Icon ist das natürlich nicht schön und lässt sich wie in unserem Beispiel mit background-repeat: no-repeat unterdrücken.

Ein zusätzliches padding-left: 30px ist sinnvoll bei einem Icon, das links vom Text angezeigt werden soll. Dieser Wert sollte der Größe des Hintergrundbildes entsprechen. Er sorgt dafür, dass das Bild vor dem Text platziert wird und auch das Bild als Teil des Links anklickbar ist.

Hintergrundbilder sind schneller

Wenn man auf einer Webseite mehrere Icons verwendet, kann das Geschwindigkeits-Einbußen mit sich bringen, denn jedes Bild muss einzeln vom Server geladen werden.

Das bedeutet eine zusätzliche Serveranfrage je Icon. Das lässt sich mit CSS Sprites ändern: Das heißt, man kombiniert die Icons zu einem größeren Hintergrundbild. Die Icons sollten an einem Raster ausgerichtet werden und außerdem mit etwas Leerraum darum herum versehen sein. Die bekannten Layouts von CSS-Zengarden verwenden z.B. diese Technik.

Wenn ein Hintergrundbild größer ist als das Element, dem es zugewiesen wird, ist nur ein Ausschnitt sichtbar. Damit bei den einzelnen Elementen jeweils der richtige Ausschnitt, also das richtige Icon, angezeigt wird, verschiebt man das Hintergrundbild einfach über background-position.

Es sind zwei Werte anzugeben: Der erste bestimmt die Position von links, der zweite die Position von oben. Positioniert wird dabei die linke obere Ecke des Bildes. Durch einen negativen Wert für die Position von oben bewirkt man zum Beispiel, dass das darunter platzierte Icon angezeigt wird.

Hier das Beipiel einer Liste, in der jeder Listenpunkt ein eigenes Icon haben soll:

Die Icons sind in einem Hintergrundbild alle untereinander platziert. Per CSS wird zuerst für alle Links definiert, dass das Hintergrundbild angezeigt und nicht wiederholt werden soll:

#sprites a {
background-image: url(sprites.png);
background-repeat: no-repeat;
padding-left: 25px;
}

Die einzelnen Links erhalten dann unterschiedliche Angaben für die Position des Hintergrundbildes – und so sorgt man dafür, dass bei jedem Link nur das gewünschte Icon sichtbar ist.

a.icon1 { background-
position: 0 0; }
a.icon2 { background-
position: 0 -30px; }
a.icon3 { background-
position: 0 -60px; }

Wichtig ist hierbei, dass man genügend Leerraum um die einzelnen Icons gelassen hat, sodass auch bei einer vergrößerten Schrift – wodurch das Element ja höher wird – nur das gewünschte Icon sichtbar bleibt.

Diese Technik setzen auch so stark besuchte Seiten wie Yahoo ein. Die kleinen Icons auf der Startseite zu den Rubriken sind alle nur Ausschnitte eines großen Hintergrundbildes, auf dem insgesamt an die 70 Icons montiert sind.

Diese CSS Sprites werden zudem gerne für über Hintergrundbilder realisierte Navigationen verwendet: Beim Hoverzustand wird einfach das Hintergrundbild verschoben.

Bei background-position kann man neben Pixeln wie im Beispiel auch Prozentangaben verwenden. Darauf basiert der nächste Effekt.

Der Parallax-Effekt

Ein schöner 3D-Effekt, den man auf silverbackapp.com sehen kann, wird über die Kombination von mehreren teilweise transparenten Hintergrundbildern erreicht.

Verändert man auf http://silverbackapp.com die Größe des Browserfensters, dann sieht man, dass die Blätter sich in verschiedenen Geschwindigkeiten bewegen. Die Blätter, die näher am Betrachter sind, bewegen sich schneller, die weiter entfernten langsamer.

Das ist in etwa, wie beim Zugfahren wenn man aus dem Fenster schaut: Die Bäume direkt neben den Gleisen rasen nur so an einem vorbei, während die Hügel und der Wald in der Ferne sich scheinbar wesentlich langsamer bewegen.

Wie setzt man so etwas um? Für den Einsatz von drei Ebenen mit drei Hintergrundbildern benötigt man auch drei Elemente. Ein Hintergrundbild weist man direkt dem body-Element zu, die beiden anderen zwei innerhalb von body platzierten Elementen:

Die beiden Hintergrundbilder für die mittlere und die vordere Ebene müssen transparent sein. Hierfür verwendet man am Besten ein PNG-Format.

Dann erhalten die einzelnen Elemente die über Prozentangaben positionierten Hintergrundbilder:

* {margin: 0; padding: 0;}
body {background: url(hg0.png) 5% 5%;}
body, html {position: relative;
width: 100%; height: 100%;}
#mitte {background: url(hg1.png) 20%
20%; height: 100%; width: 100%;}
#vorne {background: url(hg2.png) 80%
80%; min-height: 100%; width: 100%;}

Alle beteiligten Elemente werden auf Breite und Höhe des Browserfensters gesetzt, was zwar eigentlich nicht notwendig wäre, den Effekt aber deutlicher macht. Der Trick besteht in der Positionierung der Hintergrundbilder.

Bei prozentualen Angaben wird der entsprechende Punkt des Hintergrundbildes an der entsprechenden Stelle platziert: Eine Angabe wie 50% 50% positioniert die Mitte des Hintergrundbildes in der Mitte des Elements. Wenn sich die Größe des Elements ändert, muss die Position des Hintergrundbildes angepasst werden und es verschiebt sich, was vom Benutzer als Bewegung wahrgenommen wird.

Bei kleineren Prozentangaben werden die Hintergrundbilder langsamer bewegt, bei größeren Prozentangaben bewegen sie sich schneller. Deswegen erhält im Beispiel das Hintergrundbild bei body die Angabe 5% 5%, das mittlere Hintergrundbild 20% 20% und das vorderste Hintergrundbild 80% 80%.

Dass bei größeren Prozentangaben eine größere Bewegung stattfindet, lässt sich an den beiden Extremfällen veranschaulichen: Bei der Angabe von 0% 0% wird die obere Ecke des Hintergrundbildes ganz links positioniert und bei einer Größenänderung des Browserfensters wird das Hintergrundbild nicht verschoben, es bewegt sich nicht.

Im anderen Extremfall, also bei 100% 100%, wird die rechte untere Ecke des Hintergrundbildes rechts unten platziert – und wird entsprechend auch weiter verschoben, wenn sich die Größe des Browserfensters verändert. Und entsprechend bewegt es sich schneller.

Der Effekt ist zwar nett, hat aber einen Nachteil: Er wirkt nur bei einer Größenveränderung des Browserfensters. Das macht ein normaler Surfer nur selten. Aber falls doch, kommt er in den Genuss dieses kleinen Bonuseffekts.

Deswegen stört es auch nicht weiter, dass der IE6 Probleme bei der Darstellung von transparenten PNGs hat: Durch konditionale Kommentare, CSS-Hacks oder fortgeschrittene Selektoren kann man dafür sorgen, dass nur neuere Browser von den Angaben profitieren. Der Internet Explorer 6 bekommt hingegen einfach nur ein Hintergrundbild angezeigt.

PNG-Fix für den Internet Explorer 6

Auch wenn sich viele wünschen, dass der Internet-Explorer 6 per Zwangsdeinstallation von den Rechnern dieser Welt entfernt werden sollte, so bleibt doch der Wunsch Vater des Gedanken und man muss sich mit etlichen Hacks und Tricks behelfen. Das Der IE6 das Format PNG nicht mit Transparenz unterstützt ist dabei besonders ärgerlich. Es gibt aber Abhilfe in Form des folgenden CSS-Hacks, der sich Java Skript zu Nutze macht

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Wichtig bei diesem Hack ist, dass man ein transparentes GIF hinterlegt und dieses richtig verpfadet. So bewaffnet klappts auch im IE6 !

Ideen mit fixem Background

Standardmäßig kleben Hintergrundbilder hinter ihren Elementen, bewegen sich also mit ihren Elementen mit, falls auf der Seite gescrollt wird. Das lässt sich über background-attachment:fixed ändern. Durch background-attachment:fixed bleibt das Hintergrundbild beim Scrollen an seiner Position.

Dabei ist zu beachten: Zusätzliche Positionierungsangaben über background-position beziehen sich immer auf das Browserfenster, nicht auf das Element, dem das Hintergrundbild zugewiesen ist.

Dadurch sind witzige Effekte mit mehreren Hintergrundbildern möglich. Angenommen, man hat zwei Hintergrundbilder, von denen das eine farbig und das andere schwarz-weiß ist. Diese werden zwei verschiedenen Elementen zugewiesen, aber an derselben Stelle positioniert. Anfangs ist das erste Hintergrundbild sichtbar, beim Scrollen nach unten wird dann das zweite Hintergrundbild langsam sichtbar – wie aufgedeckt. Es sieht so aus, als würde sich ein Filter über das Bild bewegen.

Der benötigte HTML-Code ist einfach: zwei Elemente mit IDs. Außerdem benötigen die Elemente etwas Inhalt, damit sie die richtige Höhe haben.

<div id="kopf">Lorem ipsum...</div>
<div id="inhalt">Lorem ipsum...</div>

Per CSS werden die Hintergrundbilder eingefügt, fixiert und positioniert:

#head {background: #cdcdcd
url(panorama. jpg) no-repeat 20px 20px fixed;}
#inhalt {background: transparent url
(panorama_sw.jpg) no-repeat 20px 20px fixed;}

Wichtig ist, dass die Hintergrundbilder dieselben Positionierungsangaben erhalten: Im Beispiel sind sie 20 Pixel von oben und 20 Pixel von links positioniert.

Und der Internet Explorer 6? Leider interpretiert der IE 6 background-attachment:fixed nur korrekt bei Hintergrundbildern, die body zugewiesen sind. Hier sollte man über fortgeschrittene Selektoren oder konditionale Selektoren dafür sorgen, dass das zweite Hintergrundbild vor ihm verborgen bleibt.

Man kann die Position von Hintergrundbildern bestimmen, das Verhalten beim Scrollen und die Art der Wiederholung. Eine Eigenschaft, um die Größe des Hintergrundbildes zu bestimmen, gibt es jedoch leider nicht. Dabei wäre es natürlich sehr schön, wenn man Hintergrundbilder einfügen könnte, die sich immer dynamisch an die Größe des Browserfensters anpassen.

Es gibt jedoch Tricks, um skalierbare Hintergrundbilder zu simulieren – die aber gerade nicht mit echten Hintergrundbildern arbeiten, sondern normal in HTML eingebundene Bilder verwenden. Ein Beispiel kann man sich hier ansiehen: http://www.cssplay.co.uk/layouts/background.html.

Es funktioniert allerdings nur, wenn html und body eine Größe von 100% haben. Darauf wird dann ein Bild absolut positioniert und erhält ebenfalls eine Breite und Höhe von 100%. Auch der eigentliche Inhalt wird absolut positioniert, aber mit einem höheren z-index, sodass er über dem Hintergrundbild angezeigt wird.

Der grundlegende HTML-Aufbau besteht aus zwei div-Containern: einem für das Hintergrundbild, einem für den eigentlichen Inhalt:

Damit body und html als Bezugspunkt dienen können, werden sie auf 100% gesetzt:

body, html {height: 100%;
width: 100%; overflow: hidden;}

Das Bild selbst wird absolut positioniert und auch auf 100% gesetzt:

#hgbild {height: 100%; position:
absolute; width: 100%; z-index: 1;}

Der Inhalt ist ebenfalls absolut positioniert. Hier kann man die Angaben frei wählen und auch die Breitenangabe ist beliebig. Wichtig ist, dass der Inhaltsbereich, damit er über dem Bild angezeigt wird, einen höheren Wert für den z-index erhält als das Hintergrundbild:

#inhalt {left: 10px; position:
absolute; top: 25px; width: 400px; z-index: 10;}

Das ist eine elegante Lösung, die sich gut bei Layouts nutzen lässt, die sowieso auf position:absolute setzen.

Große Hintergrundbilder

Immer häufiger sieht man inzwischen Webseiten mit richtig großen Hintergrundbildern. Hier kommt es natürlich darauf an, das Bild zu optimieren, um die Dateigröße so klein wie möglich zu halten. Die aktuellen Ladezeiten kann man auch gut im Firebug über den Tab Netzwerk testen. Außerdem sollte natürlich unbedingt das Layout bei unterschiedlichen Auflösungen und Größen des Browserfensters überprüft werden.

Eine Methode für bildschirmfüllende Hintergrundbilder liegt in der Kombination von Hintergrundbildern mit Hintergrundfarben. Das Hintergrundbild geht an den Rändern in eine durchgehende Farbe über. Dann kann man dem Seitenhintergrund dieselbe Farbe zuweisen. Da die Hintergrundfarbe an den Stellen angezeigt wird, an denen das Hintergrundbild nicht zu sehen ist, erzeugt das die Illusion eines durchgehenden Hintergrundbildes.

Hintergrundbilder lassen sich toll einsetzen aber folgendes sollte man in Betracht ziehen: Ob die Hintergrundbilder ausgedruckt werden oder nicht, legt der Benutzer in seinen Druckeinstellungen im Browser fest; darauf haben wir keinen Einfluss. Durch ein eigenes Printstylesheet kann man allerdings dafür sorgen, dass die Informationen auch auf Papier einen guten Eindruck machen.

(Quelle: WEBeLINE 8+9/2009)

OFFICIAL PARTNER