Webdev

CSS: Background-Image mit festem Abstand von rechts / unten positionieren

Mit CSS haben wir die Möglichkeit ein Background-Image zu positionieren. Wir können es bündig an den vier Seiten ausrichten oder auch zentrieren.

background-position: left bottom;
background-position: right top;
background-position: center center;

Wir können es aber auch mit absoluten oder relativen Werten von der linken oberen Ecke aus positionieren.

background-position: 100px 200px;
background-position: 30% 20px;

Leider fehlt jedoch die Möglichkeit einen anderen Ursprung als die linke obere Ecke zu wählen, so dass wir nicht ohne weiteres ein Bild mit festem Abstand von z.B. rechts ausrichten können.

Einzige Abhilfe schafft bisher nur das Hintergrundbild auf der gewünschten Seite mit Transparenz zu vergrößern. Mit Pixelmator wie mit vielen anderen Programmen auch lässt sich das schnell und einfach durch vergrößern der Arbeitsfläche erledigen.

pixelmator_arbeitsfläche_vorher

pixelmator_arbeitsfläche_nachher

Bloß noch darauf achten, dass der Hintergrund auch wirklich transparent ist und man hat so z.B. ein Offset von 100 Pixeln geschaffen, so dass das gewünschte Hintergrundbild beim rechtsseitigen ausrichten genau 100 Pixel vom rechten Rand entfernt ist.

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.