Hintergrund vom rechten / unteren Rand aus positionieren

Wusstet ihr, dass man ein Hintergrund-Bild per CSS auch vom rechten Rand des Bezugsobjekts aus positionieren kann? Dies war mir bis heute unbekannt, obwohl dies schon seit längerer Zeit möglich ist durch den CSS3-Standard.

Syntax für den Hintergrund

Ihr könnt die üblichen Keywords um Längenangaben erweitern, um ein Bild auch von rechts und von unten zu positionieren.

background-position: right 20px bottom 10px;

Lässt man die Zahlen weg, wird standardmäßig der Wert 0 angenommen. Das Keyword center kann nicht mit einem Zahlenwert kombiniert werden.

background-position: right 5% center;

Äußerst praktisch finde ich diese Möglichkeit für Formularelemente wie Buttons oder <select>-Elemente. Wenn diese Elemente fluid / responsiv angelegt sind, ist es bisher immer schwierig gewesen ein Hintergrundbild an der rechten Seite mit etwas Abstand auszurichten.

Browsersupport

Kann man mit dem Browsersupport leben, ist die erweiterte Angabe der Hintergrund-Position wartbarer als ein Hintergrundbild mit einem Abstand zu nutzen. Der einzige Ausreißer ist der Android Stock Browser, der dieses Feature erst ab Android 4.4 unterstützt.

Demo

Ein kleines Beispiel dazu hat Chris Coyier angelegt.

Kommentar abgeben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.