I'm new to front-end development and the Foundation framework.
I'm attempting to make the div class="main-header"> a full-screen image that scales down responsively.
Could someone please tell me what I'm doing wrong? It is scaling properly, but it is not displaying the entire image. Is it possible to have the div class="large-6 large-offset-6 columns"> sit above it on a mobile device?
HTML code:
<!-- 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 -->
The 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%;
}