title: Twitter bootstrap 3 carousel with fixed background image
body: <p>My feeling is that scrolling background image is not really pleasant so I tried to get a fixed background banner and transparent foreground cycling images. I tried the following solution but in that case, the foreground images are hidden right after the cycling animation:
  Any idea to get it working?</p>
  
  <pre><code>&lt;html&gt;
  &lt;header id="myCarousel" class="carousel slide"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
           &lt;div class="fill" style="background-image:url('banniere2000x400.jpg');"&gt;&lt;/div&gt;
        &lt;div class="item active"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;img id="menuscreen" src="carouselforeground1.png" alt="Logo"/&gt;
                  &lt;p&gt;first image&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;img src="carouselforeground2.png" alt="Logo"/&gt;
                  &lt;p&gt;second image&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
             &lt;div class="carousel-caption"&gt;
                  &lt;img src="carouselforeground2.png" alt="Logo"/&gt;
                      &lt;p&gt;third image&lt;/p&gt;
             &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
          &lt;span class="icon-prev"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
          &lt;span class="icon-next"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/header&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Edited for a working example: Except that I let you choose your own images and it needs botstrap3 installed, I think that should work.</p>