title: stretched or zoomed in background photo in responsive width ; how to fix this
body: <p>I have created a responsive website.<a href="http://www.kupa-flyfishing.com/" rel="nofollow noreferrer">http://www.kupa-flyfishing.com/</a>
  On a mobile device the background photo is zoomed in / stretched.</p>
  
  <p>In the header section I have CSS which set the viewport and the background image:</p>
  
  <h3>CSS:</h3>
  
  <pre class="lang-css prettyprint-override"><code>header {
      background-attachment: fixed;
      background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/hero.jpg);
      height: 100vh;
      background-size: cover;
      background-position: center;
  }
  </code></pre>
  
  <p>What do I need to do to fix this?</p>
  
  <p>Grz,
  Lino</p>