Ich bin sehr neu in der Front-End-Entwicklung und Foundation.

Ich versuche zu bekommen<div class="main-header"> um ein Vollbild zu sein, das sich ansprechend verkleinert.

Kann mir jemand sagen, was ich falsch mache? Es wird korrekt skaliert, zeigt jedoch nicht das gesamte Bild an. Ich wollte auch das<div class="large-6 large-offset-6 columns"> auf einem mobilen Gerät darüber zu sitzen - ist das möglich?

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

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