부트 스트랩을 사용하여 탭 배경 이미지를 조정하는 방법은 무엇입니까?

내 페이지에 탭 컨테이너가 있습니다. 각 탭 창을 클릭 할 때 각 탭 창의 배경을 변경하려고합니다. 각 탭 창의 배경을 변경할 수는 있지만 배경 이미지는 탭 창으로 조정되지 않습니다. 더 커지면 전체 이미지를 볼 수 없으며 전체 이미지를 배경에 맞추고 싶습니다. PLZ 도움이 여기에 부트 스트랩을 사용하여 탭 배경 이미지를 조정하는 방법은 무엇입니까?

내 마크 업 & CSS입니다 :

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'); 
 

 
.hotel-info-bg 
 
{ 
 
    background: url('../img/content/slide_bg_hotel-info.jpg'); 
 
}

<ul class="nav nav-tabs custom-tabs" role="tablist"> 
 
    <li class="active"><a href="#info" data-toggle="tab">info</a> 
 
    </li> 
 
    <li><a href="#amenities" data-toggle="tab">amenities</a> 
 
    </li> 
 
    <li><a href="#pets" data-toggle="tab">pets welcome</a> 
 
    </li> 
 
    <li><a href="#scene" data-toggle="tab">behind the scene</a> 
 
    </li> 
 
</ul> 
 
<div class="tab-content"> 
 
    <div class="tab-pane fade active in hotel-info-bg" id="info"> 
 
    <p>info</p> 
 
    </div> 
 
    <div class="tab-pane fade" id="amenities"> 
 
    <p>amenities</p> 
 
    </div> 
 
    <div class="tab-pane fade" id="pets"> 
 
    <p>pets welcome</p> 
 
    </div> 
 
    <div class="tab-pane fade" id="scene"> 
 
    <p>behind the scene</p> 
 
    </div> 
 
</div>

여기

s의 데모 링크 : http://www.bootply.com/7OJqr7zXcn

출처

2014-11-03 Xubayer pantho

일부 fi를 제공 할 수 있습니까? ddle 링크 .. 그래서 그것은 soluton을 제공하기 쉽습니다? –

@KiranVarthi 다음을 참조하십시오 : http://www.bootply.com/7OJqr7zXcn 여기 이미지 크기는 3375X2000px이지만 이미지의 절반 만 보여줍니다. 반복없이 전체 이미지를 내 배경에 표시하고 싶습니다. –

는 것이 희망을보십시오 당신에게 도움이 -

.hotel-info-bg{ 
     background:url("http://dummyimage.com/3375x2000/ebb0eb/f0f7fa.jpg") no-repeat center; 
     background-size: 100%; 
     height: 1200px; 
     }

을

출처

2014-11-03 07:16:31

고맙습니다. :) –

내 기쁨 !!! –

부트 스트랩을 사용하여 탭 배경 이미지를 조정하는 방법은 무엇입니까?

답변

관련 문제