は、ブートストラップに表示される背景イメージを取得できません。フッタの問題

ここでは、私が作ったフッタが背景イメージをクリアしていないことを隠蔽していると思います。は、ブートストラップに表示される背景イメージを取得できません。フッタの問題

私はこのように多くの点でこれを混乱させてしまいました。私はバックグラウンドイメージを表示することができないので、この時点では挫折しています！それはちょうどヘッダーとフッターの間に少しのスペースがあります（ヘッダーのマージンと思います）。

問題は、ヘッダーとフッターの間にスペースを入れようとしても、背景が表示されないという問題です。

私はここで遅滞していると確信しています。私が間違っていることができるかどうか教えてください。

私はここで何をしているのかをカバーするために、ページ全体をカバーする大きな背景イメージと、その上にいくつかの情報、ヘッダー、フッターがある透明なフローティングボックスを入れたいと考えています。

イメージをHTMLに入れて別のDIVを置くだけで、これをよりうまくやり遂げることができれば、分かります。私が言ったように、私はここでいくつかの遅れたステップを見落としていると確信しています、見ていただきありがとうございます。

ここにすべてのコードを載せるだけで、コードの内容が混乱することはありません。

HTML：CSS annnnd

<html> 
    <head> 
     <title>Harley Fisher</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href = "css/bootstrap.min.css" rel = "stylesheet"> 
     <link rel = "stylesheet" type = "text/css" href = "styles.css"> 
</head> 

<body> 
    <div class = "navbar navbar-default navbar-static-top"> 
     <div class = "container"> 
      <a href = "#" class = "navbar-brand">Harley Fisher, CRS</a> 

      <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> 
       <span class ="icon-bar"></span> 
       <span class ="icon-bar"></span> 
       <span class ="icon-bar"></span> 
      </button> 

      <div class = "collapse navbar-collapse navHeaderCollapse"> 
        <ul class = "nav navbar-nav navbar-right"> 

         <li class = "active"><a href = "#">Home</a></li> 
         <li><a href = "#">Buy</a></li> 
         <li><a href = "#">Rent</a></li> 
         <li><a href = "#">Agents</a></li> 
         <li><a href = "#">Contact</a></li> 
         <li><a href = "#">About Us</a></li> 
       </div> 
      </div> 
     </div> 
    </div> 


    <div class = "gradfoot"> 
     <div class="container"> 
      <div class="col-sm-8 col-sm-offset-2 text-center"> 
       <h2 class="">Contact Me</h2> 

       <hr class=""> 
     <h4 class=""> 
    Harley Fisher 
    </h4> 


     <p><span class = "glyphicon glyphicon-map-marker" aria-hidden="true"></span>1723 S Leyden St 
Denver</p> 
     <p><span class = "glyphicon glyphicon-envelope" aria-hidden="true"></span> [email protected]</p> 
     <p><span class = "glyphicon glyphicon-earphone" aria-hidden="true"></span> (303) 759 8811</p> 
     <p><span class = "glyphicon glyphicon-print" aria-hidden="true"></span> (303) 759 8844</p> 
     <hr class=""> 
     <ul class="list-inline center-block"> 
      <li><a href="#" class=""><img src="images/fb.png" class=""></a> 
      </li> 
      <li><a href="#" class=""><img src="images/twit.png" class=""></a> 
      </li> 
      <li><a href="#" class=""><img src="images/goog.png" class=""></a> 
      </li> 
      <li><a href="#" class=""><img src="images/pint.png" class=""></a> 
      </li> 
     </ul> 
    </div> 
    </div> 

    <script src="https://code.jquery.com/jquery-1.12.2.js"></script> 
    <script src = "js/bootstrap.js"></script>  
</body>

：外観を取るための

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 > li > a { 
color: #c7c7c7; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
color: #f2f2f2; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
color: #f2f2f2; 
background-color: #7e46e7; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > 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; 
    } 
}

ありがとう！

出典

2016-04-11 Gage Lovett