相关疑难解决方法(0)

我是前端开发和基金会的新手.

我试图<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%;
}