ページにタブコンテナがあります。これらのタブリンクをクリックすると、各タブペインの背景を変更しようとしています。各タブペインの背景を変更できますが、背景画像がタブペインに調整されません。フル画像が大きくなるため表示できません。フル画像を背景に合わせたいです。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>これがデモリンクです：http：//www.bootply.com/7OJqr7zXcn
それがあなたを助けることを願ってこの希望を試してください-
.hotel-info-bg{
background:url("http://dummyimage.com/3375x2000/ebb0eb/f0f7fa.jpg") no-repeat center;
background-size: 100%;
height: 1200px;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加