div와 footer 사이에 빈 공간없이 div에 배경 이미지 추가

웹 페이지를 만들 때 부트 스트랩을 사용하고 있습니다. 나는 한 개의 수평 탐색 바, 머리글, 그리고 본문 내용을위한 나누기와 왼쪽의 수직 바, 그리고 꼬리말이있는 페이지를 만들었다. 배경에서 이미지를 추가하고 싶지만 작성한 본문 부분에만 이미지를 추가하고 싶습니다 (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); 
}

나는 위의 CSS의 코드를 추가하려했으나 포함되지 않았다

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

내 HTML 코드 바닥 글까지 모든 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

가능한 복제본 [부트 스트랩의 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; 

}

포함 된 이미지는 div 내에 있지만 이미지가 전체 div에 들어 가지 않을 수 있습니다. 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에 배경 이미지 추가

답변

관련 문제