title: Bootstrap Background Image not resizing on iPhone
body: <p>I have created a website that is close to completion using Bootstrap.The problem I am having is that on a desktop or android device it looks great and works as planned. However, on Iphone the background image doesn't shrink to fit the display. The site uses Cascade scrolling.</p>
  
  <p>www.mabmetalworks.com</p>
  
  <p>I suspect it has something to do with the iphone being a retina display ?</p>
  
  <p>Can you take a look at my code below please and advise how I rectify it to work with iPhone ?</p>
  
  <pre><code>&lt;div id="home" class="home"&gt;
    &lt;div class="text-vcenter"&gt;
     &lt;h1&gt;MAB Metal Works&lt;/h1&gt;
     &lt;h3 class = "H2"&gt;Your Local Steel Company&lt;/h3&gt;
     &lt;a href="#about" class="btn btn-default btn-lg"&gt;Continue&lt;/a&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
   #home {
   background: url(../images/main.jpg) no-repeat center center scroll; 
   display: table;
   height: 100%;
   position: relative;
   width: 100%;
   max-width: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }
  </code></pre>