CSS Hintergrund-Position funktioniert nicht auf Handy

Question

Ich habe ein Problem, ein Hintergrundbild richtig zu positionieren. Es funktioniert auf dem Desktop, und selbst wenn ich das Fenster zur Simulation eines Telefons verkleinere, wird es korrekt angezeigt, aber wenn ich die Website auf meinem Handy (getestet auf Android/Chrome und iOS/Safari) besuche, scheint es die Hintergrundposition zu ignorieren Eigentum.

CSS in Frage:

.blur { 
     background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
     rgba(43, 43, 43, 0.1), 
     rgba(43, 43, 43, 0.1) 
    ), 
    /* bottom, image */ 
    /* BACKGROUND IMAGE */ 
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg'); 
    background-attachment: fixed; 
    background-position: -350px -150px; 
    background-position-x: -350px; 
    background-position-y: -150px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-color: #2b2b2b; 
    overflow: auto; 
} 

@media (min-width: 40em) { 

.blur { 
     background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
     rgba(43, 43, 43, 0.1), 
     rgba(43, 43, 43, 0.1) 
    ), 
    /* bottom, image */ 
    /* BACKGROUND IMAGE */ 
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg'); 
    background-attachment: fixed; 
    background-position: -350px 0; 
    background-size: cover; 
    background-repeat: none; 
    } 

@media (min-width: 50em) { 

    .blur { 
    background: 
     /* top, transparent blue, faked with gradient */ 
     linear-gradient(to right, 
     rgba(43, 43, 43, 0.1), 
     rgba(43, 43, 43, 0.1) 
    ), 
     /* bottom, image */ 
     /* BACKGROUND IMAGE */ 
     url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg'); 
    background-attachment: fixed; 
    background-position: -250px 0; 
    background-size: cover; 
    background-repeat: none; 
    } 

Ich habe nach Lösungen gesucht und gefunden zwei Vorschläge, die Menschen geholfen haben es die Vergangenheit: das Hinzufügen background-position-x und background-position-y, die nicht helfen, und die Bewegung des Hintergrundbild aus body und in einen anderen Container (.blur in diesem Fall), die auch nicht geholfen hat.

Die Website ist: https://suzannecowan.ca/.

Vielen Dank im Voraus für eine Beratung, die Sie zur Verfügung stellen können.

Answer 1

Wenn Sie Ihr bg-Bild auf cover einstellen, bedeutet das, dass es sich auf die Höhe des Bildschirms ausdehnt, was bedeutet, dass Sie auf einem kleinen Gerät eine sehr enge Sicht darauf haben. Persönlich würde ich entweder die Größe des Bildes ändern, um größer und dünner zu sein, so dass es besser auf einem mobilen Bildschirm passt, oder statt dessen die Hintergrundgröße auf 100% auto setzen, was ziemlich gut aussieht.

Answer 2

In Android/Chrome wird der Hintergrund positioniert. Wenn Sie den Wert ändern, wird das Bild verschoben. Sie können dies auch über den Chrome (mobile) Web-Debugger bestätigen.

Der Unterschied zwischen Mobile/Desktop kommt von dem Unterschied, wie die beiden diese Längeneinheiten behandeln.