title: can't get a background image to appear in bootstrap, maybe footer issue
body: <p>So, I think what is happening here is the footer I've made is not clearing the background image and is covering it up.</p>
  
  <p>I've messed around with this in so many ways and I'm frustrated at this point because I can't seem to get the background image to appear! It's just a header and a footer with a little space in between it (I think it's a margin for the header).</p>
  
  <p>Problem is, even when I try to force some space between the header and footer, the background still does not appear.</p>
  
  <p>I'm sure I'm just doing something retarded here, please let me know if you can what I'm doing wrong.</p>
  
  <p>To cover what I'm doing here, I want to have a big background image that covers the whole page, and a transparent floating box over the image with some information on it, a header and a footer.</p>
  
  <p>If this is doable in a better fashion by just putting the image in the html and putting another DIV over it, lemme know. Like I said I'm sure I'm overlooking some retarded step here, thanks for taking a look.</p>
  
  <p>I'll just post all the code here so there's no confusion as to what any of the code is.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Harley Fisher&lt;/title&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link href = "css/bootstrap.min.css" rel = "stylesheet"&gt;
          &lt;link rel = "stylesheet" type = "text/css" href = "styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class = "navbar navbar-default navbar-static-top"&gt;
          &lt;div class = "container"&gt;
              &lt;a href = "#" class = "navbar-brand"&gt;Harley Fisher, CRS&lt;/a&gt;
  
              &lt;button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"&gt;
                  &lt;span class ="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class ="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class ="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;div class = "collapse navbar-collapse navHeaderCollapse"&gt;
                      &lt;ul class = "nav navbar-nav navbar-right"&gt;
  
                          &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Buy&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Rent&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Agents&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class = "gradfoot"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-sm-8 col-sm-offset-2 text-center"&gt;
                  &lt;h2 class=""&gt;Contact Me&lt;/h2&gt;
  
                  &lt;hr class=""&gt;
           &lt;h4 class=""&gt;
      Harley Fisher
    &lt;/h4&gt;
  
  
          &lt;p&gt;&lt;span class = "glyphicon glyphicon-map-marker" aria-hidden="true"&gt;&lt;/span&gt;1723 S Leyden St 
  Denver&lt;/p&gt;
          &lt;p&gt;&lt;span class = "glyphicon glyphicon-envelope" aria-hidden="true"&gt;&lt;/span&gt;  HarleyLFisher@gmail.com&lt;/p&gt;
          &lt;p&gt;&lt;span class = "glyphicon glyphicon-earphone" aria-hidden="true"&gt;&lt;/span&gt;  (303) 759 8811&lt;/p&gt;
          &lt;p&gt;&lt;span class = "glyphicon glyphicon-print" aria-hidden="true"&gt;&lt;/span&gt;  (303) 759 8844&lt;/p&gt;
          &lt;hr class=""&gt;
          &lt;ul class="list-inline center-block"&gt;
              &lt;li&gt;&lt;a href="#" class=""&gt;&lt;img src="images/fb.png" class=""&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class=""&gt;&lt;img src="images/twit.png" class=""&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class=""&gt;&lt;img src="images/goog.png" class=""&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class=""&gt;&lt;img src="images/pint.png" class=""&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://code.jquery.com/jquery-1.12.2.js"&gt;&lt;/script&gt;
      &lt;script src = "js/bootstrap.js"&gt;&lt;/script&gt;       
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>annnnd the css:</p>
  
  <pre><code>body{
  background-color: black;
  background-image:url("images/bigbg.jpg");
  height:100%;
  width:100%;
  }
  
  #myCarousel{
  margin-top: -20px;
  z-index:1;
  }
  
  #shadowh{
  text-shadow: 1px 1px black;
  font-size: 50px;
  }
  
  #shadowp{
  text-shadow: 1px 1px black;
  font-size:20px;
  }
  
  
  /* navbar */
  .navbar-default {
  background-color: #432281;
  border-color: #432281;
  
  }
  /* title */
  .navbar-default .navbar-brand {
  color: #cccccc;
  }
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
  color: #f2f2f2;
  }
  /* link */
  .navbar-default .navbar-nav &gt; li &gt; a {
  color: #c7c7c7;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
  color: #f2f2f2;
  }
  .navbar-default .navbar-nav &gt; .active &gt; a, 
  .navbar-default .navbar-nav &gt; .active &gt; a:hover, 
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
  color: #f2f2f2;
  background-color: #7e46e7;
  }
  .navbar-default .navbar-nav &gt; .open &gt; a, 
  .navbar-default .navbar-nav &gt; .open &gt; a:hover, 
  .navbar-default .navbar-nav &gt; .open &gt; a:focus {
  color: #555;
  background-color: #D5D5D5;
  }
  
     .searchbar{
  max-width: 800px;
  } 
  
  label{
  margin-top: 35px;
  padding:10px;
  color:#f2f2f2;
  font-size:40px;
  }
  
  .butpad{
  padding:10px;
  margin-bottom:10px;
  }
  
  .rowpad{
  padding:20px;
  }
  
  .stackpad{
  padding:10px;
  }
  
  .carousel-inner img{
  margin:auto;
  }
  
  .grad{
  background:#432281;
  background: -webkit-linear-gradient(#432281, #41335b); /* For Safari 5.1 to      6.0 */
  background: -o-linear-gradient(#432281, #41335b); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#432281, #41335b); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#432281, #41335b); /* Standard syntax */
  
  }
  
  .gradfoot{
  background:#000000;
  background: -webkit-linear-gradient(#41335b, #000000); /* For Safari 5.1 to    6.0 */
  background: -o-linear-gradient(#41335b, #000000); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#41335b, #000000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#41335b, #000000); /* Standard syntax */
  color:#9e9e9e;
  }
  @media (max-width: 500px) {
    #shadowh {
      font-size: 30px;
    }
  
    #shadowp{
        font-size: 14px;
    }
  
    .footh2{
        font-size:20px;
    }
  
    .footh4{
        font-size:16px;
    }
  
    .footp{
        font-size:13px;
    }
  
    label{
        font-size: 25px;
    }
  }
  </code></pre>
  
  <p>Thanks for taking a look!</p>