jquery - フクロウのカルーセル画像に背景色を追加する

Question

jQuery Owl Carouselを使用していますスライダー画像に背景色を追加する画像スライダーを作成しました。

2019 年のメモ: http://owlgraphic.comが悪意のあるサイトにリダイレクトされるようになりました。

マークアップは次のとおりです。

 <!-- HEADER-02 CONTENT -->
<div class="header-02-sub">

<!-- SLIDER STARTS HERE -->
<div id="owl-slider" class="owl-carousel owl-theme">

          <div class="item">
            <img src="http://placehold.it/1600x700" alt="The Last of us">
            <div class="caption">

             <h1>SOME TITLE HERE</h1>

            </div>               
          </div>
         <div class="item">
            <img src="http://placehold.it/1600x700" alt="The Last of us">
             <div class="caption">

             <h1>SOME TITLE HERE</h1>

            </div>          
          </div>
          <div class="item">
            <img src="http://placehold.it/1600x700" alt="The Last of us">
            <div class="caption">

             <h1>SOME TITLE HERE</h1>

            </div>     
          </div>

        </div>
  <!-- SLIDER ENDS HERE -->      


 </div>

 <!-- END HEADER-02 CONTENT -->

私はこのCSSを追加することを結びました:

.header-02-sub {
background-color:red;
z-index:9999999;
witdth:100%;
height:100%;
}

私はこのコードを#owl-slider親に追加しようとしました.itemが、これらのどれも機能しませんでした。

ここにjsbinがあります

スライド画像に背景色を追加する方法について何か提案はありますか?