title: Background Fixed on Mobile Devices
body: <p>I wanted to do flowing content over fixed background. It works perfectly on desktop. On iOS also works but not perfect. Main problem is on android phones. It isn't covering content. If you want edit it, here is <a href="https://codepen.io/heybetov1998/pen/mxJBbP" rel="nofollow noreferrer">CodePen</a> link.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    height:200vh;
  }
  #one{
    height:300px;
    width:100%;
    background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
  }
  #two{
    padding-top:30px;
    background-color:grey;
    height:400px;
    padding-left:10px;
  }
  .column{
    width:calc((100% / 3) - 10px);
    height:200px;
    float:left;
    margin-right:10px;
    background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;section id="one"&gt;&lt;/section&gt;
    &lt;section id="two"&gt;
      &lt;div class="column column_one"&gt;&lt;/div&gt;
      &lt;div class="column column_two"&gt;&lt;/div&gt;
      &lt;div class="column column_three"&gt;&lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>