add background color over owl carousel image

Question

I'm using jQuery Owl Carousel and I've created an image slider in which I want to add a background color over the slider image.

Note from 2019: http://owlgraphic.com redirects to malicious site now.

Here's the markup:

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

I've tied adding this CSS :

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

I've tried also adding this code to the #owl-slider parent or .item and none of these works.

Here's a jsbin

Any suggestions on how can I add a background color over the slide image ?

Answer 1

Add an absolutely positioned DIV (we'll call it .overlay) into the .item element and then mark-up this new DIV with

.overlay{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 700px;
  width: 1600px;
  background-color: red;
  opacity: 0.5;
}

Update:

If your page is responsive, add position: relative to .item and then change .overlay height and width to 100%

.item{
  position: relative;
}
.overlay{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: red;
  opacity: 0.5;
}

New JSBin