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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".