title: background image won't show on tablet and mobile phone
body: <p>The background image shows perfectly on PC and simulator (tablet and phone), but it won't show on actual phone/tablet.</p>
  
  <p><strong>code</strong></p>
  
  <pre><code>div#photo_break {
    @include viewport-unit(height, 28vw);
    background-image: url('&lt;img&gt;');
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
    z-index: 99999;
  }
  </code></pre>
  
  <p><a href="http://www.fitnesscoachirina.com" rel="nofollow noreferrer">website</a></p>
  
  <p>As you can see in this picture, in <code>Chromes simulator</code>the picture is shown.</p>
  
  <p><a href="https://i.stack.imgur.com/TqGXW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TqGXW.jpg" alt="picture showing that in the Chrome simulator it works!"></a></p>
  
  <p>The size of the image is not really large, or is it?</p>
  
  <p><a href="https://i.stack.imgur.com/QYbkP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QYbkP.png" alt="enter image description here"></a></p>