Q:

Twitter Bootstrap Carousel with overlaying responsive image

I'm trying to find a way to have a "responsive" image overlay the carousel from Twitter bootstrap.
I found How do i add a mask on top of a bootstrap element? which helped me with the overlay - but when I add the image to that div, it doesn't resize like the carousel.
From what I've read images in the bootstrap have max-width:100% - does that mean have to set a width for the overlay div?
Fiddle: http://jsfiddle.net/CF8m8/ - change the width of the result window to see what I mean.
Thankful for all help.

A:

YOu can do the following : Jsfiddle Jsfiddle with resized overlay
Jsfiddle in browsercheck in browser
Edit: I would suggest you to use different sizes of images to cater different screen , that way you wont loose the quality and even the ratio can be fixed according to your choice . Than load those images with media queries , so with every different screen you are serving them resized image which will fit well on to your carousal .    
<div class="container">
 <div class="carousel slide">
  <div class="carousel-inner">
    <div class="overlay"></div>
    <div class="item active">
        <a href=""><img src="http://www.placehold.it/900x500&text=One" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Two" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Three" /></a>
    </div>
 </div>
 <a class="carousel-control left" href=".carousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href=".carousel" data-slide="next">›</a>
  </div>
 </div>

In css use the following :
.overlay {
background: url(http://lorempixel.com/310/310/cats/) top left no-repeat;
position: absolute;
top: 0;
left: 0;
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%;

  }
}

A:

I think there is a better solution. @Shail. I will use your example itself. 
Add an image like I shown below to the div=overlay and add the class "image-responsive". Then bootstrap will take care of the rest. 
<div class="overlay">
<img src="images/slideshowfx.png" class="image-responsive"/>
</div>

I used the size width="1200px" and height="300px(or whatever height you want)"
After removing the unnecessary styles, the CSS would be like this.
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

This is all that you need to do. You can eliminate all the other unnecessary CSS styles. 

