Bootstrap CSS Hintergrund-Position funktioniert nicht auf mobilen Geräten

Question

Vielen Dank für die Beantwortung meiner ersten Frage. Ich lerne Bootstrap, während ich gehe (ich bin ein Designer, der Code lernt), viel Versuch und Irrtum, aber ich liebe es. So, hier ist der Deal:

Ich bin Redesign meiner Unternehmenswebsite und Hinzufügen von Medienabfragen zu meinem CSS für mobile Geräte. Wenn ich die Hintergrundposition hinzufüge und einstelle, kann ich die Anpassungen sofort in Dreamweaver und in meiner Live-Vorschau sehen. Aber in meinen mobilen Geräten (iPad und iPhone 5) verschiebt sich die X-Achse, aber nicht die Y-Achse.

Dies ist mein Test-Site: http://test.lighthousesoftware.com

Here are my mobile screens

Was soll ich so tun, dass ich die Wellen Hintergrund in den mobilen Bildschirmen sehen kann (Ich möchte die Y-Achse das Bild verschieben nach oben)?

Hier ist mein HTML:

<header> 
    <div class="header-content"> 
     <div class="header-content-inner"> 
      <h1 id="homeHeading">Automated Business Process,<br>Your Business Intelligence </h1> 
      <hr> 
      <p>Prism vice artisan, venmo migas you probably haven't heard of them crucifix meditation organic marfa cardigan. Dreamcatcher banh mi synth, organic flannel hell of gastropub keffiyeh marfa poke roof party. </p> 
      <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a> 
     </div> 
    </div> 
</header> 

Und mein CSS:

header { 
     position: relative; 
     width: 100%; 
     min-height: auto; 
     background-size: cover; 
     background-image: 
     url("https://lssinc.com/files/original/header.jpg"); 
     text-align: center; 
     background-attachment: fixed; 
     background-position: 25% 0; 
     color: white; 
     height: 80%; 
    } 
    @media only screen and (max-width: 1024px) { 
     header { 
      background-image: url(url("https://lssinc.com/files/original/header.jpg"); 
      background-size: cover; 
      background-repeat: no-repeat; 
      background-position: 0px 20px; 
      background-attachment: fixed; 
      color: white; 
      height: 80%; 
      text-align: center; 
     } 
    } 
    @media only screen and (max-width: 320px) { 
     header { 
      background-image: url("https://lssinc.com/files/original/header.jpg"); 
      background-size: cover; 
      background-repeat: no-repeat; 
      background-position: -70px -80px; 
      background-attachment: fixed; 
      color: white; 
      height: 150%; 
      text-align: center; 
     } 
    } 

Answer 1

Gute Frage! Ich glaube, diese Frage wurde bereits beantwortet here. Das Problem liegt in der Hintergrundgröße: Cover.