festen Hintergrund für einen Teil einer Website (div) in iOS

Ich möchte eine feste Position Hintergrundbild, das den gesamten Bildschirm nur für einen Abschnitt meiner Website (eigentlich zwei Abschnitte, aber unabhängig, so dass es keine Unterschied). Ich benutze diese CSS auf dem Behälter DIV des Abschnitts:festen Hintergrund für einen Teil einer Website (div) in iOS

#wrapper { 
    background-image: url(../img/bg1_IMG_1509.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;  
}

(Anmerkung: Ich habe die seperate Eigenschaften anstelle der Stenografie background der Hoffnung, dass dies mit mehr Geräten und Browsern kompatibel sein würde, aber es doesn die zu sein scheinen so.

Dies funktioniert mehr oder weniger gut in allen Desktop-und Browsern und auch in einigen Browsern auf Android, aber überhaupt nicht in iOS. In iOS wird der Hintergrund nicht nur gescrollt, sondern auch extrem vertikal gestreckt, so dass die Höhe des Hintergrundbildes den gesamten DIV abdeckt, der sehr viel Inhalt hat und auf einem mobilen Gerät ziemlich hoch wird, was dazu führt, dass mehr oder gesehen wird weniger einzelnes Pixel auf dem Bildschirm. Also, weder fixed noch cover funktionieren.

Ich bin mir bewusst/habe Antworten auf Fixpositions-Workarounds für iOS gelesen, die ein DIV innerhalb des Tags <body> verwendeten, das position: fixed und ein Vollbild-Hintergrundbild erhielt. Aber ich will das nicht auf dem ganzen Körper, sondern nur in zwei (unabhängigen) Abschnitten, und in dieser Situation kann diese Problemumgehung nicht verwendet werden.

Quelle

2016-04-09 Johannes

was ist die 'höhe' von' # wrapper'? – Aziz

Die Höhe ist nicht angegeben und daher "auto", da sie viele andere Elemente/Inhalte enthält. – Johannes

Ich fand dies:

.bg { 
    background: url(image.jpg); 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    background-position: center center; 
    background-repeat: no-repeat; 
}

hier: https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/page/3/

im Grunde Sie Ihren Hintergrund in einem anderen div setzen und das feste Attribut in den div anstelle des Hintergrund geben. Sie müssen Z-Index hinzufügen: -1; und füge weißen Hintergrund hinzu oder was auch immer, um das Bild zu verstecken, wo du es nicht sehen willst.

Quelle

2016-10-03 12:47:23 Seb

festen Hintergrund für einen Teil einer Website (div) in iOS

Antwort

Verwandte Themen