title: Apply "background-size:cover" to Twitter Bootstrap Carousel slides
body: <p>I am working with a basic Bootstrap Carousel with three slides. Before I implemented the slider, I had one static image via css background-image of its respective div. In my CSS, I was using background-size:cover, and really liked the way the image responded to different browser widths. Depending on the width of my image, I could get the important section of the image to always stay visibile and centered, while the extra width on either side was only visible on widescreen monitors as an added effect.</p>
  
  <p>I want to retain that same image behavior now that I'm using Bootstrap's Carousel, but even if I assign dimensions to the slide's viewport, I still can't get my background images to show up. I currently have it set up so each slide displays a separate css class, and each one has a different background image so it can scroll between three images.</p>
  
  <p>If this is not possible via background-image, it there another way to manipulate image elements so their display behavior is the same as background-size:cover?</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code> &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Carousel items --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item ad1"&gt;
        &lt;img src="{{ STATIC_URL }}img/TestBannerAd.png"&gt;
      &lt;/div&gt;
      &lt;div class="item ad2"&gt;
        &lt;img src="{{ STATIC_URL }}img/TestBannerAd2.png"&gt;
      &lt;/div&gt;
      &lt;div class="item ad3"&gt;
        &lt;img src="{{ STATIC_URL }}img/TestBannerAd3.png"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Carousel nav --&gt;
    &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
    &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#myCarousel {
      width: 100%;
  }
  .carousel-control {
      margin-top: 20px;
  }
  .carousel-inner {
      width: 100%;
      height: 400px;
  }
  .ad1 {
      background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  .ad2 {
      background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  .ad3 {
      background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>
  
  <p>Hopefully this isn't a stupid question and we can figure this out!</p>