Warum Hintergrundbild Offset ~ 25% wenn "Hintergrund-Anhang: lokal"?

Question

Kann mir bitte jemand helfen zu verstehen, warum diese CSS:

<style type="text/css"> 
    html { 
     background: url(images/img.diary.1280.jpg) no-repeat center center local; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
    body { 
     font-family: 'alpha geometrique', fantasy, cursive, sans-serif; 
     background: none; 
    }... 

das Hintergrundbild von ~ 25% machen würde „nach oben“, so dass nur die unteren ~ 75% des Bildes, zu diesem alternativen verglichen gezeigt "Hintergrund:" Linie?

background: url(images/img.diary.1280.jpg) no-repeat center center fixed; 

die 100% der Bildanpassung innerhalb des Ansichtsfensters zeigt (was ich wünsche)?

Ich habe auch "scroll" versucht, aber das hat den gleichen Effekt wie "local". Der Grund, warum ich nicht fix verwenden möchte, ist, dass wenn ich das Fenster scrolle, die Elemente (Bootstrap 4) scrollen, aber das Hintergrundbild sieht nicht so aus, als würden die Elemente oben rutschen. Ich bevorzuge die Elemente & die Bildrolle zusammen, das ist das eigentliche Ziel, das ich versuche zu erreichen.

Dank

Answer 1

Es hat mit den background-size: cover und dem Seitenverhältnis des Bildes zu tun. Cover vergrößert das Bild, bis es sowohl die Breite als auch die Höhe abdeckt. Wenn das Bild also im Hochformat ist und das Fenster im Querformat ist, vergrößert es das Bild so lange, bis es so breit ist wie das Fenster, das es größer macht als das Fenster, und da Sie es vertikal zentriert haben, sind die Ober- und Unterseite nicht sichtbar. Versuchen Sie folgendes:

html { 
    background: url(images/img.diary.1280.jpg) no-repeat center center local; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    } 

enthalten ist wie Best-Fit, wird es erhöhen (oder verringern), um die Größe des Bildes auf die größte Größe, die in dem Fenster passen.

Answer 2

Kudos Arleigh Hix für mich in die richtige Richtung.

Was ich brauchte, ist zu background-position: center topbackground-attachment: local zu ändern. Jetzt habe ich sowohl das Verhalten, das ich will.