title: Background-Attachment: Fixed Doesn't Work On iOS
body: <p>I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. <a href="https://imgur.com/4oxC1rf" rel="nofollow noreferrer">This</a> is what the site looks like on iPhones, and <a href="https://imgur.com/ucyKovH" rel="nofollow noreferrer">this</a> is what it should look like. The CSS code I'm using is as follows:</p>
  
  <pre><code>.container {
      min-width: 320px;
      max-width: 480px;
      margin: 0 auto;
  }
  
  .fixed-background {
      height: 800px;
      -webkit-backgound-size: cover;
      -o-backgound-size: cover;
      -moz-backgound-size: cover;
      background-size: cover;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: center center;
      text-align: center;
      overflow: auto;
  }
  </code></pre>
  
  <p>I've also tried using a <code>@media</code> query to fix it for iOS using some posts on stackoverflow, but this didn't seem to have any effect:</p>
  
  <pre><code>@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
      .fixed-background {
          background-attachment: scroll;
      }
  } 
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="fixed-background bg-1"&gt;
      &lt;div class="container"&gt;
          &lt;div class="title"&gt;
              &lt;h1&gt;ROOK PROPERTY&lt;br&gt;MANAGEMENT INC.&lt;/h1&gt;
              &lt;h2&gt;CONDOMINIUM MANAGEMENT&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>