Eu sou muito novo no desenvolvimento Front-end e Foundation.

Estou tentando conseguir<div class="main-header"> para ser uma imagem em tela cheia que reduza a escala de forma responsiva.

Alguém pode me dizer o que estou fazendo errado? Ele está sendo dimensionado corretamente, mas não está mostrando a imagem completa. Eu também queria o<div class="large-6 large-offset-6 columns"> sentar-se acima em um dispositivo móvel - isso é possível?

O HTML:

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

O CSS:

.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%;
}