title: Background Image -- Chrome Dev Tools Mobile Emulator Doesn't Match Actual Device (iPhone)
body: <p>Weird problem:  I'm working on a bootstrap responsive site, and using the Chrome Developer Tools Device Emulator to see how things look.  Unfortunately, what I see on Chrome Devtools doesn't look at all like what I see on an actual mobile phone.  </p>
  
  <p><img src="https://i.stack.imgur.com/1o2eX.jpg" alt="iPhone5 screen shot"></p>
  
  <p>For some reason, my background images aren't propagating correctly.  The defect is noted on four of the five slides on that home page.  </p>
  
  <pre><code>&lt;div id="slide-2m" class="gf_mobile" style=" height: 100%; margin: 0 auto; 
              overflow: hidden; background-color: white;
              background-image: url(&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/includes/images/oranges_mobile.png);
              background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; padding: 40px 0;" &gt;
      &lt;div style="height: 100%; overflow: hidden; margin-top: 20%;" &gt;
          &lt;img src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/includes/images/who_we_are_text_883x862.png" style="width: auto; height: 55vh;"&gt;
      &lt;/div&gt;
      &lt;div style="height: 100%; overflow: hidden; margin-top: -300px;"&gt;
          &lt;img src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/includes/images/sqf_logo_883x862.png" style="width: auto; height: 55vh; "&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Hmm.. I'm wondering if its either the use of vh (view port units?)  or perhaps the dual use of background-color: white; and background-image: (I'm using a .png with transparent background, so I need the white in there.) ?  </p>
  
  <p>So the obvious question is, why doesn't the emulator accurately match the actual mobile device?  Is that a bug in the Chrome Developer Tools?  </p>
  
  <p>AAAAAaarggh!  I just tested the same site with a Samsung Galaxy S5 with Chrome browser, and it looks same as the Chrome Browser Emulator. Perfect! So... does that mean Chrome error'd in the details of its iPhone simulator (or ... is Apple at fault here?)</p>
  
  <p>Note: And yes, I'm aware of the issues involving mobile (visual viewport  vs layout viewport)  ref: <a href="http://www.quirksmode.org/mobile/viewports2.html" rel="nofollow noreferrer" title="A tale of two viewports">A Tale of Two Viewports.</a>  </p>
  
  <p>I'm going to attempt to convert all vh's and vw's over to pixels and then retest.  But I'm still baffled why the difference in the emulator.  Again, should this be a bug submission, and to whom.. Apple or Chrome folks?</p>
  
  <p>Update: I'm working on converting all VW and VH's to pixels but so far on a screen by screen basis, that is a fail.  I'm really thinking this has something to do with CSS and background-size and background-location.  Look at the background image on this slide, emulator vs iphone.  </p>
  
  <p><img src="https://i.stack.imgur.com/wpdqO.jpg" alt="Second screen image"></p>
  
  <pre><code>&lt;div id="slide-4m"  class="gf_mobile" style=" height: 100%; margin: 0 auto; overflow: 
              hidden; background-color: white;
              background-image: url(&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/includes/images/farm_field_1018x474.jpg);
              background-repeat: no-repeat; background-position: center center; background-attachment: fixed; 
              background-size: cover; padding: 40px 0;" &gt;
  </code></pre>
  
  <p>One more thing I just now noticed:  I've set up <code>background-attachment: fixed;</code> and that's how they work on the emulator.  On the Samsung, I can see the backgrounds on all the five slides but they DO SCROLL. On the iPhone, I can't see the background on most of the slides.  The whole thing is odd.  </p>
  
  <p>Oops: <a href="https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios">Background-fixed, not so hot on mobile...</a> </p>