배경 이미지 컨테이너 안에 전체 화면 늘이기

-1

배경 이미지가 전체 너비로 늘어나려고합니다. 여기 내 마크 업입니다배경 이미지 컨테이너 안에 전체 화면 늘이기

<body> 
    <div class="container"> 
     <div class="text-center"> 
     <h3><a href="#" class="logo" >The Sound <span class="fa fa-volume-off" style="color:#EF4836;"></span>linic</a></h3> 
     </div> 
     <div class="vspace2"></div> 
     <nav class="navbar text-center" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span style="color:#555;" class="fa fa-bars fa-2x"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a class="fattify" href="#">About</a></li> 
      <li><a class="fattify" href="#">Studio</a></li> 
      <li><a class="fattify" href="#">Team</a></li> 
      <li><a class="fattify" href="#">Contact</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </nav> 

    <div class="first-main"> 
     <div class="text-center"> 
     Whatever I write here 
     </div> 
    </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body>

부트 스트랩을 사용하고 있습니다. first-main 클래스 내의 배경 이미지는 전체 화면 너비로 늘어나지 않습니다. 어떻게해야합니까? 여기

은 별도의 CSS의 일부입니다

.first-main{ 
    border-top: 5px solid #555; 
    background : url('../../studio-1.jpg') no-repeat; 
    background-size :100% auto; 
    width : 100% ; 
    height: 800px; 
}

UPDATE

Fiddle

당신은 CSS에서 시도해야

출처

2014-09-14 Deepankar Bajpeyi

데모를 넣어, 당신은 너무 많은 HTML 코드가 만 1 요소는 여기에 CSS를 가지고있다. –

나는 여기에서 무엇인가 시도했다. 그리고 이미지는 폭의 100 %를 차지하고있다. 만약 당신이 클래스 충돌이 있는지 확인해야합니다 ... http://jsfiddle.net/vfdhqvrk/ –

내 피들을 참조하십시오 –

글쎄,. 컨테이너의 여백은 다음과 같습니다. 0 15px;

기본적으로 이미지 컨테이너에 여백 : 0-15 픽셀을 사용할 수 있습니다. 당신이 아는 한 최선의 해결책이 아닙니까? 이 레이아웃의 경우, 너비가 다른 경우 레이아웃을 기본으로 정의하지 않는 것이 좋습니다. 모든 문서 대신 각 요소 안에 여백을 넣으십시오. 앞으로도 많은 문제를 피할 수 있습니다.

하지만 내가 말했듯이. .. 여백을 사용하여이를 "정렬"할 수 있습니다.

DEMO :http://jsfiddle.net/8t1gg3g1/5/

기본적으로 이미지의 컨테이너 내부의 일부 속성을 넣어해야 할 일. 당신이 패딩을 사용할 때 당신이 아마 알고, 폭이 증가하지 않는 각 요소를 만드는 부트 스트랩의 경계 박스의 기본을 제거하기위한

.first-main{ 
    border-top: 5px solid #555; 
    background : url(http://votemenot.com/upload/398/3980.jpg) no-repeat; 
    background-size :100% auto; 
    width : 100% ; 
    height: 800px; 
    margin: 0 -15px; 
    padding: 0 15px; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
}

내용 상자입니다.

하지만 나중에 문제가 발생하지 않도록 컨테이너를 충전하는 것이 좋습니다.

는 DEMO :http://jsfiddle.net/8t1gg3g1/8/

출처

2014-09-14 19:39:35

또한 '행'클래스가 누락 된 것 같아 컨테이너를 전체 너비의 컨테이너 유체로 교체해야합니까? –

모든 화면을 차지하는 요소로 작업 할 때 width : 100 % 만 넣으면됩니다. 특정 너비를 사용하는 요소로 작업 할 때 요소로 생성 된 기본값으로 작업합니다. 참조 : http://jsfiddle.net/7obv8a5e/ –

'.align'을 너비 : 100 %의 요소로 변환하여 @media 화면을 배치하는 것을 잊지 말고 반응 형으로 조정하십시오 :-) –