Full-screen responsive background image

Question

I am very new to Front-end development and Foundation.

I am trying to get <div class="main-header"> to be a full screen image that scales down responsively.

Can anyone tell me what I am doing wrong? It is scaling properly, but is not showing the full image. I also wanted the <div class="large-6 large-offset-6 columns"> to sit above it on a mobile device – is that possible?

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

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

Answer 1

http://css-tricks.com/perfect-full-page-background-image/

//HTML <img src="images/bg.jpg" id="bg" alt="">  //CSS #bg {   position: fixed;    top: 0;    left: 0;     /* Preserve aspet ratio */   min-width: 100%;   min-height: 100%; } 

OR

img.bg {   /* Set rules to fill background */   min-height: 100%;   min-width: 1024px;    /* Set up proportionate scaling */   width: 100%;   height: auto;    /* Set up positioning */   position: fixed;   top: 0;   left: 0; }  @media screen and (max-width: 1024px) { /* Specific to this particular image */   img.bg {     left: 50%;     margin-left: -512px;   /* 50% */   } } 

OR

//HTML <img src="images/bg.jpg" id="bg" alt="">  //CSS #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }  //jQuery $(window).load(function() {              var theWindow        = $(window),             $bg              = $("#bg"),             aspectRatio      = $bg.width() / $bg.height();          function resizeBg() {                  if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {                     $bg                         .removeClass()                         .addClass('bgheight');                 } else {                     $bg                         .removeClass()                         .addClass('bgwidth');                 }          }          theWindow.resize(resizeBg).trigger("resize");  });