title: Fixed background cover becomes zoomed in mobile view
body: <p>I'm using a fixed background cover for my website here: <a href="http://www.datisdesign.com" rel="noreferrer">http://www.datisdesign.com</a></p>
  
  <p>Every page has a big header image, but in small devices such as mobiles, the cover image becomes so large. I want to make it smaller in mobile devices.</p>
  
  <p>This the code that I'm using:</p>
  
  <pre><code>#takelessons {
      background: url(../img/portfolio/takelessons-intro.jpg) no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-position: center top;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/xCLQi.png" alt="Normal view"></p>
  
  <p><img src="https://i.stack.imgur.com/MF9wC.png" alt="Mobile view"></p>