Как отрегулировать фоновое изображение вкладки с помощью бутстрапа?

Question

У меня есть контейнер вкладок на мои страницы. Я пытаюсь изменить фон каждой панели вкладок, когда я нажимаю эти ссылки на вкладке. Я могу изменить фон для каждой панели вкладок, но фоновое изображение не настраивается на панель вкладок. Я не могу просмотреть полное изображение, потому что он становится больше, я хочу, чтобы полное изображение было в фоновом режиме. плз помочь

Вот мой разметки & 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

Answer 1

Попробуйте надеюсь, что это поможет вам -

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