Soy muy nuevo en Desarrollo Front-end y Fundación.

Estoy tratando de conseguir<div class="main-header"> para ser una imagen de pantalla completa que se reduzca responsivamente.

¿Alguien puede decirme que estoy haciendo mal? Se está escalando correctamente, pero no muestra la imagen completa. Yo tambien queria el<div class="large-6 large-offset-6 columns"> sentarse encima de él en un dispositivo móvil, ¿es eso posible?

El 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 -->

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