background-position mit Prozentangaben

HTML-Seite zu Demonstartionszwecken

Es werden Container benutzt die ein Maß von 400px x 400px haben.
Die Hintergrundgrafik misst 100px x 100px.
Die Gitternetzlinien haben einen Abstand von 10px.

Es wurden gerade teilbare Maße gewählt, um die Positionen des Hintergrundbildes besser demonstrieren zu können.
Natürlich würden bei nicht so günstig gewählten Maßen die Ränder der Grafik Gitternetzlinien scheinbar willkürlich überschneiden.
Die Gesetzmässigkeiten sind jedoch dieselben.

Ganz unten am Ende der Seite habe ich Ihnen ein kleines interaktives Beispiel konstruiert.
Bewegen Sie einfach Ihre Maus über die angegebenen Werte und schauen was passiert ;-) .

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%;}

nach oben

 

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%;}
      ;-)

      Zunge raustrecken

nach oben

 

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%;}