Bootstrap: Hintergrund ist div Container, nicht nur der Bildschirm

Question

Auf meiner Website möchte ich, dass der Hintergrund überhaupt nicht bewegt, während der Inhalt im Vordergrund über den Hintergrund scrollt. Dieser Effekt funktioniert perfekt auf meinem MacBook. Ich habe es mit Safari, Chrome und Firefox getestet. Jetzt, wenn ich die Website auf meinem iPhone öffne, decken die Hintergrundbilder den ganzen Div-Container ab, nicht nur den Bildschirm, was bedeutet, dass das Bild viel zu groß und nicht mehr scharf ist.

HTML:

<div id="tf-home" class="text-center"> 
    <div class="overlay"> 
     <div class="content"> 
      <h1>EURE <strong><span class="color">FLUCHT</span></strong> beginnt an diesem Ort</h1> 
      <a href="#tf-about" class="fa fa-angle-down page-scroll"></a> 
     </div> 
    </div> 
</div> 

CSS:

#tf-home { 
    background: url(../img/header.jpg); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    min-height: 100% 
    color: #cfcfcf; 
} 

Ich hoffe, dass mir jemand helfen kann.

Vielen Dank im Voraus :)

Answer 1

hier finden Sie jsfiddle

#tf-home { 
    background: url(https://www.google.com/work/images/logo/google-for-work-social-icon.png); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    min-height: 100vh; 
    color: #cfcfcf; 
}