Bootstrap: background carousel in specific div (row) - css

Question

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:
jsfiddle
<div id="background">
<div class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</div>
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide"4 src="http://placehold.it/1200x440/999999/cccccc" >
</div>
<div class="item">
<img alt="Second slide" src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
<div class="item">
<img alt="Third slide" src="http://placehold.it/1200x440/dddddd/333333">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
</div>
</div>
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)