title: Background image enlarged on mobile devices
body: <p>I'm working on my portfolio, and I've set it up so that I have some background images.  It looks great on all the computers that I've tested it on, but the pictures get blown up until all I see are pixels on mobile devices like iPhone and iPad (haven't been able to test other devices yet, but I did test on both chrome and safari). It also looks fine when I do the mobile view on chrome.  </p>
  
  <p>I found <a href="https://stackoverflow.com/questions/35203859/background-image-is-blown-up-on-mobile-device">this post</a> that seems to be the closest thing to my problem, but the solutions don't help me. I can change <code>background-size</code> to <code>contain</code>, as the top responder says, but I get those white bars on the sides and that's not what I want. </p>
  
  <p>I can't do anything like inspect element on my mobile device, so how do I figure out what the problem is here?</p>
  
  <p>Here's my site: <a href="http://www.julianbossiere.com/" rel="nofollow">www.julianbossiere.com</a></p>
  
  <p>And here's the CSS I'm using for the banner images:</p>
  
  <pre><code>#banner-about {
      background-image: url(../img/desktop.jpg);
  }
  
  #banner-contact {
      background-image: url(../img/sunset.jpg);
  }
  
  #banner-about, #banner-contact {
      height: 60vh;
  }
  
  #banner-about, #banner-contact, #image-home {
      transition: height 0.8s;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      background-size: cover;
  }
  
  #image-home {
      height: 100vh;
      background-image: url(../img/julian-rooftop.jpg);
  }
  </code></pre>
  
  <p>Thanks!</p>