移動設備上的背景圖像大小

Question

我的背景圖像似乎無法在移動設備上顯示。在桌面瀏覽器上，它看起來很好，可以縮放到手機尺寸，但是當我在iPhone上的Safari上加載時，它不會顯示。鏈接是：http://lamda.jwoods.me/。我已經包含了相關的HTML和CSS以及它在手機上的顯示方式以供參考。

HTML：

<div class="jumbotron main-jumbo"> 
    <nav class="navbar transparent navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">The Drama Centre</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="lamda.html">About LAMDA</a></li> 
      <li><a href="benefits.html">Benefits</a></li> 
      <li><a href="classes.html">Classes</a></li> 
      <li><a href="teachers.html">Teachers</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs"> 
      <li class="visible-lg-block"><a class="navtext">Follow us: </a></li> 
      <li><a href="#fb"><i class="fa fa-facebook-official fa-2x"></i></a></li> 
      <li><a href="#tw"><i class="fa fa-twitter fa-2x"></i></a></li> 
      <li><a href="#ig"><i class="fa fa-instagram fa-2x"></i></a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

    <div class="container jumbo-container"> 
     <h1> The Drama Centre </h1> 

     <h4> A leading LAMDA specific centre in Wiltshire </h4> 

    </div> 

</div> 

CSS：

.main-jumbo { 
    background: 
    linear-gradient(
     rgba(0, 0, 0, 0.3), 
     rgba(0, 0, 0, 0.0) 
    ), 
    url("../img/jumbobgweb.jpg"); 

    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed; 
    webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin-bottom: 100px; 
    min-height: 60 

.main-jumbo h1, .main-jumbo h4{ 
    color: white; 
    text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 


.jumbo-container { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    height: 400px; 
} 

移動圖像：

Answer 1

添加此行CSS的固定我的問題：

@media (max-width: 768px) { 
    .main-jumbo { 
     background-attachment: scroll; 
    } 
} 

顯然背景附件：滾動在手機上比固定更好。