Slider inside image - CSS - html

Question

I am trying to create slider inside an image.
As to the attachment, I want to change the proportion of the background color and then to insert inside this div the slider.
I was using this example:
Fiddle here
The code:
HTML
<div class="col-6 col-md-4">
<img class="temp" src="img/phone.png">
<div class="bg-image">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/testimonial-bg.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
CSS
#application img {
width: 250px;
height: 375px;
position: absolute;
}
.temp {
background: #440;
}
/*Image slider */
.bg-image {
width:250px;
height:350px;
background-repeat:no-repeat;
background-size:100%;
position: relative;
padding: 150px 0 0 0;
z-index: 1;
}
.carousel-inner>.item>a>img,
.carousel-inner>.item>img{
height: 350px;
}
Thank you for your help.