Question

我的页面中有一个标签容器。当我单击这些选项卡链接时，我正在尝试更改每个选项卡窗格的背景。我可以更改每个选项卡窗格的背景，但我的背景图像不会调整到选项卡窗格。我无法查看完整的图像，因为它变得更大，我想将完整的图像放入背景中。请帮忙

这是我的标记＆amp;的CSS：

＆＃13;

@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');
}

＆＃13;

<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>

＆＃13;

以下是演示链接：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;
       }

如何使用bootstrap调整选项卡背景图像？

1 个答案: