title: Site background zoomed in on mobile
body: <p><strong>Scenario</strong></p>
  
  <p>I am building a website for a client, the site works fine locally and externally on desktop but on mobile it doesn't work, the background images are extremely zoomed in. but when i use chrome devtools and change the view to mobile view everything works as expected.</p>
  
  <p>Here is an image of what it should look like.</p>
  
  <p><a href="https://i.stack.imgur.com/5ImDh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5ImDh.png" alt="enter image description here"></a></p>
  
  <p>Here is an image of what it looks like. </p>
  
  <p><a href="https://i.stack.imgur.com/WYRrR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WYRrR.png" alt="enter image description here"></a></p>
  
  <p>Here is the CSS for the header element.</p>
  
  <pre><code>.header {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("../img/header-2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
  }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>Why is this happening, and why is chrome devtools showing as if everything is okay?</p>
  
  <p>If you need anymore information please ask and ill provide.</p>
  
  <p><strong>edit</strong></p>
  
  <p>This is happening specifically on IOS devices. Everyone ive asked to test that has an IOS device has shown me the same screenshot of the image being extremely zoomed in.</p>