Pfft. Da macht man (ich) seit Jahren, fast Jahrzehnten, mit diesem CSS-Zeugs rum, denkt, dass man den Krams eigentlich ganz gut verstanden hat und im Griff hat. Klar, manchmal passieren komische Sachen, die man nicht so direkt versteht oder nachvollziehen kann, dann stochert man ein bisschen rum, sucht sich ähnliche Probleme und/oder Hinweise zusammen, fixt den Kram oder lässt von der konkreten Idee ab und nimmt einen anderen Weg zum Ziel. Und dann gibt es so AHA Momente, meistens völlig unerwartet und ohne Vorwarnung -- einen solchen hatte ich heute früh, als mir Jens Linksammlung durch die Morgentimeline flog, und ich dort einen Link zum Thema "CSS Hintergrundbilder" fand, den ich um ein Haar nicht geklickt und gelesen hätte, da der Umgang mit Hintergrundbildern nun wirklich zu meinem alltäglichen Handwerkszeug gehört und das ja schon so irgendwie so zu den absoluten Basics gehört, und haha, Basics, die habe ich natürlich im Griff. Keine Frage. Aber hey, der Artikel ist von Sara Soueidan und da gibt es eigentlich immer was Interessantes zu entdecken, also lese ich da so einigermaßen interessiert, wie so das Koordinatenbezugssystem tickt, welcher Bezugspunkt da genommen wird, wenn man das Bild um Einheiten auf der X- oder Y-Achse versetzen will…

… alles soweit nichts Neues, und dann plötzlich, BÄM, der WTF Moment für mein Webentwickler-Ego.

Bei prozentualen Werten statt absoluten Werten wird nicht die linke obere Ecke des Bildes mit der linken oberen Ecke des umgebenden Containers in Bezug gesetzt, sondern die prozentualen Strecken sowohl des Containers, als auch des Bildes. Und plötzlich erinnere ich mich daran, dass ich vor gar nicht all zu langer Zeit mit prozentualen Einheiten gekämpft hatte, weil ich in einer Responsive Seite Hintergrundbilder eben in Relation zur umgebenden Containerbreite und dem Platz, der darin für Text vorgesehen ist, verschieben wollte - und da passierten einige für mich eben nicht ganz nachvollziehbare Sachen - weil ich einfach davon ausgegangen bin, dass auch hier die linke obere Ecke das Maß aller Verschiebungsdinge sei.

Wenn man verstanden hat, wie das mit den Strecken gedacht ist…:

With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.

… dann wird doch so Einiges klarer: zum Beispiel warum ein Bild, was genau die gleiche Breite und/oder Höhhe hat wie der umgebende Container, sich nicht auf der entsprechenden Achse bewegt, wenn man prozentuale Werte eingibt. Oder warum ein Bild, was mit background-position: 50% 50%; gesetzt ist, zentriert in der Mitte des Containers sitzt. Und warum ein background-position: 100% 100%; das Bild mit seiner rechten Kante an den rechten Rand und mit seiner unteren Kante an den unteren Rand setzt, statt es einfach komplett aus dem Container zu verschieben (genau darüber hatte ich mir nämlich den Kopf zerbrochen bei meinem "linke ober Ecke" Modell - wenn diese um 100% - also die gesamte Länge des Containers verschoben würde, dürfte das Bild selbst ja dann rechts ausserhalb des Containers sitzen. Macht's aber nicht. :-)

Und zu guter Letzt erklärt sich dann auch, warum ein Bild, was größer skaliert ist als der Container, sich bei negativen Werten trotzdem nach rechts statt nach links verschiebt - das war nämlich ebenfalls eine der Grübelfaktoren im oben beschriebenen Fall.

Weil das Ganze sich aber schwierig erklären lässt, habe ich da mal ein CodePen vorbereitet, wo man die Auswirkungen von Skalierung und prozentualer Positionierung testen kann:

See the Pen eNxqMw by Tom (@webrocker) on CodePen.

Viel Spaß. :-)