Я очень новичок в разработке и создании Front-end.

Я пытаюсь получить<div class="main-header"> быть полноэкранным изображением, которое масштабируется быстро.

Может кто-нибудь сказать мне, что я делаю не так? Он правильно масштабируется, но не показывает полное изображение. Я также хотел<div class="large-6 large-offset-6 columns"> сидеть над ним на мобильном устройстве - это возможно?

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