배경 이미지 부트 스트랩 전체 화면 없음

Question

안녕하세요 저는 배경 그림을 컨테이너보다 더 넓게 만드는 문제를 해결할 수 없습니다.

이미지로 설정을 변경하면 입력 양식의 세로 가운데 정렬이 손실됩니다. 어떻게해야

참조 사진 :

.container-table { 
 
    display: table; 
 
    height: calc(100vh - (45px + 35px)); 
 
    background: url("http://dummyimage.com/600x400/000/fff") no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 
.vertical-center-row { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.submitbutton { 
 
    border-radius: 0; 
 
    transform: scaleX(-1); 
 
    background-color: #0c8484; 
 
} 
 
.form-control { 
 
    border-radius: 0; 
 
    font-size: 40px; 
 
} 
 
.fa-search { 
 
    color: #e1f0f0; 
 
}

<div class="container container-table"> 
 
    <div class="row vertical-center-row "> 
 
    <div class="col-lg-offset-2 col-lg-8"> 
 
     <div class="logo"> 
 
     <p class="logoname">LOGO</p> 
 
     </div> 
 
     <div class="input-group"> 
 
     <input type="text" class="form-control input-lg"> 
 
     <span class="input-group-btn"> 
 
      <button class="btn btn-lg submitbutton" type="button"> 
 
      <i class="fa fa-search"></i> 
 
      </button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

당신은 단지 부모 DIV의 컨테이너 유체 클래스 컨테이너 클래스를 대체 할 수 있습니다. 폭에 변경 : 100 % 부작용이있을 수 있습니다 ..

<div class="container container-table">  /* Original */ 
<div class="container-fluid container-table"> /* Modified */