2017-01-17 3 views
1

Wenn ich ein Hintergrundbild mit 80% auf der X-Achse verwenden möchte und die Bildbreite 30% beträgt, wird das Bild teilweise verschwinden die rechte Seite (beginnend bei 80% und endend bei 110% der div's Breite). Es scheint jedoch, dass der Browser entscheidet, die rechts Seite des Bildes bei 80% auszurichten - aber wenn ich 80 zu 20 geändert, dann richtet es die linke Seite um 20% aus. Das ist wirklich seltsames Verhalten und ein Problem für mich.Falsche Hintergrundbildpositionierung für Bild nahe am rechten Rand

Hier ist eine Geige zu illustrieren, was ich rede:

https://jsfiddle.net/qzbrkbcz/2/

Der erste Hintergrundbild richtig positioniert ist und das zweite ist rechtsbündig.

Wie stelle ich sicher, dass die obere linke Ecke der Hintergrundbilder immer unter dem Wert background-position positioniert ist?

Antwort

1

Das Hintergrundbild positioniert sich entsprechend seiner eigenen Größe. Also, wenn Sie es aus dem Behälter gehen wollen, werden Sie so etwas wie background-position: 250% 100%;

https://jsfiddle.net/maxpaj/qzbrkbcz/6/

Viel Glück :)

+0

Also im Grunde muss ich verwenden, um das Hintergrundbild der Breite in die Position hinzufügen x Wert WENN die Breite + x mehr als 100% beträgt. – jovan

+0

Entweder müssten Sie Pixelwerte verwenden, um die Hintergrundposition zu bestimmen. Oder berechnen Sie, wie groß das Bild relativ zum Container ist, und legen Sie dann den Prozentwert entsprechend fest. Ich habe eine neue Fiddle mit einer Position gemacht, die durch Pixelwerte bestimmt ist: https://jsfiddle.net/maxpaj/qzbrkbcz/7/ – maxpaj

Verwandte Themen