title: Full-screen responsive background image
body: <p>I am very new to Front-end development and Foundation.</p>
  
  <p>I am trying to get <code>&lt;div class="main-header"&gt;</code> to be a full screen image that scales down responsively. </p>
  
  <p>Can anyone tell me what I am doing wrong? It is scaling properly, but is not showing the full image. I also wanted the <code>&lt;div class="large-6 large-offset-6 columns"&gt;</code> to sit above it on a mobile device – is that possible?</p>
  
  <p>The HTML: </p>
  
  <pre><code>&lt;!-- MAIN HEADER --&gt;
  &lt;div class="main-header"&gt;
     &lt;div class="row"&gt;
       &lt;div class="large-6 large-offset-6 columns"&gt;
         &lt;h1 class="logo"&gt;BleepBleeps&lt;/h1&gt;
         &lt;h3&gt;A family of little friends&lt;br&gt;that make parenting easier&lt;/h3&gt;
       &lt;/div&gt; &lt;!-- END large-6 large-offset-6 columns --&gt;
     &lt;/div&gt;&lt;!-- END ROW --&gt;
  &lt;/div&gt;&lt;!-- END MAIN-HEADER --&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.main-header {
      background-image: url(../img/bb-background2.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      width: 100%;
      height: 100%;
  }
  
  h1.logo {
      text-indent: -9999px;
      height:115px;
      margin-top: 10%;
  }
  </code></pre>