title: How to make the position static in mobile view
body: <p>The website has a section, which has a background image. In the desktop website to make it look good, background image was made fixed so that it can have parallax effect. But in the mobile website, parallax does not make sense. So I wanted to remove the fixed in the mobile view. Here is the code I have tried. </p>
  
  <pre><code>&lt;section class="girl-cover-photo"&gt;
  &lt;/section&gt;
  
  .girl-cover-photo {
    height: 730px;
    background: url("../img/girl-cover.jpg") fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }
  @media screen and (max-width: 768px) {
    .girl-cover-photo .girl-cover-photo {
      background: url("../img/girl-cover.jpg") relative;
    }
  }
  </code></pre>
  
  <p>But somehow the parallax shows up in the mobile view. Any pointers on what to do to fix this?</p>