Bootstrap: background carousel in specific div (row)
<p>I have a div where is a carousel - separately with text and images. Everything works (almost perfect) :) But I want have a background carousel with images in this set. I have sth like that:
<a href="https://jsfiddle.net/mywne80g/" rel="nofollow">jsfiddle</a></p>

<pre><code>&lt;div id="background"&gt;
    &lt;div class="carousel slide carousel-fade" data-ride="carousel"&gt;

      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="slider" class="carousel slide col-xs-9  padd-lt0" data-ride="carousel" data-interval="3000"&gt;

    &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
            &lt;img alt="First slide"4 src="http://placehold.it/1200x440/999999/cccccc" &gt;   
        &lt;/div&gt;
        &lt;div class="item"&gt;
            &lt;img alt="Second slide" src="http://placehold.it/1200x440/cccccc/ffffff"&gt;  
        &lt;/div&gt;
        &lt;div class="item"&gt;
            &lt;img alt="Third slide" src="http://placehold.it/1200x440/dddddd/333333"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="slider_captions" class="col-xs-3 "&gt;
    &lt;div&gt;
        &lt;div id="caption-0" class="carousel-caption"&gt;
            &lt;h2&gt;Title 1&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="caption-1" class="carousel-caption"&gt;
            &lt;h2&gt;Title 2&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="caption-2" class="carousel-caption"&gt;
            &lt;h2&gt;Title 3&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When I try put this example to other div (div .row) i don't see any background. I tired z-index and background-color: transparent - but nothing was happen.
How to convert the example above (background slider) so that it works only in a specific div (not the entire browser window)</p>