title: Dotted overlay over image to scale when bootstrap carousel size changes
body: <p>I have a bootstrap carousel and a dotted overlay over it.</p>
  
  <p>Demo here: <a href="http://jsfiddle.net/r4x99ecf/" rel="nofollow">http://jsfiddle.net/r4x99ecf/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="banner"&gt;
      &lt;div class="carousel slide"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;&lt;img src="http://i.imgur.com/8hAR6s4.jpg" /&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="http://i.imgur.com/BPSXgEp.jpg" /&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="http://i.imgur.com/Vk1Y6v0.jpg" /&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;$(".carousel").carousel();&lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.carousel, .carousel-inner {
      height: 350px;
  }
  
  .overlay {
      background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>My problem is, if you shrink the window size, the images' width will decrease. The images keep the aspect ratio so the height decreases as well. But the overlay has the same height.</p>
  
  <p>How can I either get the overlay's height to shrink with the image, or overflow the image (less preferred).</p>