Jestem bardzo nowa w rozwoju Front-end i Foundation.

Próbuję się dostać<div class="main-header"> być obrazem pełnoekranowym, który skaluje się w dół.

Czy ktoś może mi powiedzieć, co robię źle? Skaluje się prawidłowo, ale nie wyświetla pełnego obrazu. Chciałem też<div class="large-6 large-offset-6 columns"> siedzieć nad nim na urządzeniu mobilnym - czy to możliwe?

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

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