background-position: {0% 0%;}
background-position: {20% 0%;}
background-position: {30% 0%;}
background-position: {40% 0%;}
background-position: {50% 0%;}
background-position: {100% 0%;}
background-position: {50% 50%;}
background-position: {-10% -10%;}
Interaktive background-position
background-position: {?% ?%;}
- 0% 10%
-
background-position: {0% 10%;}
-
- 10% 10%
-
background-position: {10% 10%;}
-
- 10% 20%
-
background-position: {10% 20%;}
-
- 10% 30%
-
background-position: {10% 30%;}
-
- 10% 40%
-
background-position: {10% 40%;}
-
- 10% 50%
-
background-position: {10% 50%;}
-
- 0% 50%
-
background-position: {0% 50%;}
-
- 0% 60%
-
background-position: {0% 60%;}
-
- 0% 70%
-
background-position: {0% 70%;}
-
- 0% 80%
-
background-position: {0% 80%;}
-
- 0% 90%
-
background-position: {0% 90%;}
-
- 0% 100%
-
background-position: {0% 100%;}
-
- 10% 90%
-
background-position: {10% 90%;}
-
- 20% 80%
-
background-position: {20% 80%;}
-
- 30% 70%
-
background-position: {30% 70%;}
-
- 40% 60%
-
background-position: {40% 60%;}
-
- 50% 50%
-
background-position: {50% 50%;}
-
- 60% 40%
-
background-position: {60% 40%;}
-
- 70% 30%
-
background-position: {70% 30%;}
-
- 80% 20%
-
background-position: {80% 20%;}
-
- 90% 10%
-
background-position: {90% 10%;}
-
- 100% 0%
-
background-position: {100% 0%;}
-
- 110% -10%
-
background-position: {110% -10%;}
-
- 120% -20%
-
background-position: {120% -20%;}
-
- 130% -30%
-
background-position: {130% -30%;}
-
- ?% ?%
-
"front"-position: {100% 0%;}
;-)
-
Interaktives Hintergrund Sprite
Wenn Sie diese kleine Demonstration im IE7 anschauen, werden Sie feststellen, dass die "Verschiebung" des Hintergrundbildes nicht ganz korrekt geschieht.
Die background-position ist in Prozent angegeben und der Internetexplorer rundet verkehrt.
Wenn Sie in den Quelltext schauen, wundern Sie sich nicht.
Um die "Verschiebung" des Hintergrundbildes optisch nachvollziehbar zu machen, wurde zusätzliches Markup benötigt.
Gleichzeitig sollte jedoch die Positionierung im blau umrahmten div-Container mit nachvollziehbaren Prozentangaben verwirklicht werden.
Ich konnte nicht alle Browser testen. Aufgrund der unkorrekten Rundung von Prozentangaben bei (hier ja benötigten) dezimalen "Kommazahlen" in manchen Browsern (spez.IE), ist eine Angabe in px empfehlenswert.
Sehen Sie dazu auch folgende Beiträge in meinem Blog:
background-position Angaben in Prozent
Zeilennummern verschoben im code highlighter
Die Animation wurde nur mit CSS realisiert.
- Home
-
background-position: {0% 0%;}
-
- Portfolio
-
background-position: {0% 33.3333%;}
-
- Referenzen
-
background-position: {0% 66.6666%;}
-
- Kontakt
-
background-position: {0% 100%;}
-