Bootstrap叠加图像没有响应

我使用这个CSS代码在bootstrap中使图像覆盖在滑动条上，但是当调整图像大小时，图像没有响应:

.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute; 
background-position: center;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
  }
     @media (min-width: 768px) and (max-width: 979px) {
      .overlay{
         width:50%;
        height:50%;
  }    
 }
  @media (max-width: 767px) {
     .overlay{
  width:50%;
  height:50%;
  }
  }
@media (max-width: 480px) {
   .overlay{
   width:50%;
  height:50%;
  }
}

下面是我正在使用的滑块的HTML:

    <div id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="overlay" class="img-responsive"></div>
        <div class="item active">
          <img src="/img/Bar.jpg" class="fill">
        </div>
        <div class="item">
          <img src="/img/Outside.jpg" class="fill">
        </div>
        <div class="item">
          <img src="/img/Table_1.jpg" class="fill">
        </div>
        <div class="item">
          <img src="/img/Tables_2.jpg" class="fill">
        </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>  
    </div>

有人能帮我解决这个问题吗?

图片为。png格式