如何使用bootstrap調整標籤背景圖片？

我有一個標籤容器進入我的頁面。我試圖改變每個標籤窗格的背景，當我點擊這些標籤鏈接。我可以更改每個選項卡窗格的背景，但我的背景圖像未調整到選項卡窗格中。我無法查看完整圖像，因爲它變得更大，我想將完整圖像放入背景中。 plz幫助如何使用bootstrap調整標籤背景圖片？

這裏是我的標記& 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鏈接..這樣就很容易提供解決方案嗎？ – 2014-11-03 06:34:13

@KiranVarthi看到這個：http://www.bootply.com/7OJqr7zXcn 這裏圖像大小是3375X2000px，但它只顯示圖像的一半，我想在我的背景中顯示完整圖像，沒有任何重複。 – 2014-11-03 07:05:46

試試這個希望它會幫助你 -

.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

謝謝你的作品.... :) – 2014-11-03 07:19:32

我的榮幸!!! – 2014-11-03 07:21:10

如何使用bootstrap調整標籤背景圖片？

回答

相關問題