divとfooterの間に空白を入れずにdivに背景画像を追加

私はウェブページを作成するためにブートストラップを使用しています。私は、1つの水平ナビゲーションバー、ヘッダー、次にボディコンテンツの分割と左側の垂直バー、そしてフッターを含むページを作成しました。バックグラウンドでイメージを追加したいのですが、作成したボディーディビジョン（col-lg-10）にのみ追加します。どちらが最善の方法ですか？例えば、http://www.bootply.com/62096のように、このすべての部分をカバーするイメージが必要です。問題は、イメージを追加しようとしましたが、divとフッターの間に空白があることです。ここでdivとfooterの間に空白を入れずにdivに背景画像を追加

は私のコードです - https://jsfiddle.net/clarissab/23kcck71/

私のCSSコード

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin-bottom: 120px; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #E0E0E0; 
} 
#header { 
    background-color: #4C6F85; 
    height: 80px; 
    text-align: center; 
    background-size: cover; 
} 
.nav-custom a { 
    background-color: #ffffff; 
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
}

私のHTMLコード

<body> 

    <div class="container-fluid"> 
    <nav class="navbar navbar-default"> 

     <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Name company</a> 
     </div> 

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

      <li><a href="#">Info</a></li> 
      <li><a href="#">Address</a></li> 
     </ul> 
     </div> 
    </nav> 

    <div class="row"> 
     <div class="col-sm-8"> 
     <ul class="breadcrumb lighterbgcolor"> 
      <li class="location">HOME</li> 
     </ul> 
     </div> 
    </div> 


    <div id="header" class="col-lg-12"> 
     <h2><strong>Title</strong></h2> 
    </div> 


    <div id="sideLeft" class="col-lg-2"> 
     <ul class="nav nav-pills nav-custom nav-stacked"> 
     <BR> 
     <BR> 

     <li class="nav-link active"><a href="#">ABOUT</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Goals</a></li> 
     <li><a href="#">Help</a></li> 
     </ul> 
    </div> 


    <div id="body2" class="col-lg-10" style="padding-left:100px; padding-right:300px;"> 
     <BR> 
     <h4 class="text-justify">blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</h4> 
     <BR> 
     <h4 class="text-justify">blaablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</h4> 
     <BR> 
     <h4 class="text-justify">blablablablablablabla</h4> 
     <BR> 
     <h4 class="text-justify">blablablablablablabla</h4> 
     <BR> 

    </div> 
    </div> 


    <div id="footer" class="col-lg-12"> 

    </div> 

</body>

私は上記のコード、CSSに追加しようとしましたが、カバーしていませんでしたすべてのdivをフッターまで。

#body2 { background-image: url('xx.jpg'); 
     background-repeat:no-repeat; 
     background-size:79%; 
     height: 740px; 
           }

出典

2016-10-11 Paul

いいえ、またはうまくいかなかったのですか？あなたは何を求めているのかをより具体的にする必要があります。 – BenM

このようなもの：https://jsfiddle.net/23kcck71/5/ – LGSon

[[bootstrapのdivタグで完全な背景画像を表示する]の可能な複製]（http://stackoverflow.com/questions/27613802/showing-full-background -image-in-div-in-bootstrap） – Rob

バックグラウンドサイズのCSSを試すことができます。まず背景を欲するdivを対象にします。例：

body{ 
    ... 
    background-size: cover; 
    */or/* 
    backgroun-size: contain; 
    background-repeat: no-repeat; 

}

が含まれている可能性があります。 Cover、あなたがdiv全体をカバーしているので画像の一部を表示しないかもしれません。別のオプションがありますbackground-size:100% 100%;

出典

2016-10-11 17:12:49 devtye

背景URLを引用符で囲みます。

background: url('background.png');

出典

2016-10-11 17:30:35

はい、私はそれをしましたが、すべてのdivをカバーしていませんでした – Paul

divとfooterの間に空白を入れずにdivに背景画像を追加

答えて

関連する問題