Teil 2: CSS: Tricks mit Hintergrundbildern
- CSS: Tricks mit Hintergrundbildern
- Teil 2: CSS: Tricks mit Hintergrundbildern
- Teil 3: CSS: Tricks mit Hintergrundbildern
- Teil 4: 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:...
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%;}
