Hintergrund-Macht

Teil 2: CSS: Tricks mit Hintergrundbildern

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 sorgen wir 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 Sie genügend Leerraum um die einzelnen Icons gelassen haben, 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 hochfrequentierte 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 können Sie neben Pixeln wie im Beispiel auch Prozentangaben verwenden. Darauf basiert der nun vorgestellte Effekt.

Parallax-Effekt

Ein schöner 3D-Effekt, den Sie beispielsweise bei silverbackapp.com sehen können, wird über die Kombination von mehreren teilweise transparenten Hintergrundbildern erreicht.

Verändern Sie bei einmal die Größe des Browserfensters, und Sie sehen, 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 genauso, wie wenn man beim Zugfahren 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.

Zur prinzipiellen Realisierung: Für den Einsatz von drei Ebenen mit drei Hintergrundbildern benötigen Sie entsprechend auch drei Elemente. Ein Hintergrundbild weisen Sie direkt dem body-Element zu, die beiden anderen zwei innerhalb von body platzierten Elementen:

<body><div id="mitte"><div id="vorn"></div></div></body>

Die beiden Hintergrundbilder für die mittlere und die vordere Ebene müssen transparent sein. Geeignet wäre hierfür das 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%;}

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…