Carousel behind transparent cutout in PNG image - html

Question

Having issues with what I assumed would be a simple task, maybe just need another set of eyes.
We have a banner image and on the right side is a computer monitor. the "screen" has been cut out so that portion of the banner is transparent (.PNG).
I need to place a carousel behind the cutout image, so that it gives the impression that the carousel is "playing" on the screen.
Right now I am trying to do this with Slick Carousel but if anyone else has a recommendation for a better carousel that is also responsive I'm open.
http://codepen.io/tconroy/pen/ZYRaRd
Above is a codepen of what I have so far -- The main issue I am encountering is that the slides are in front of the image content (overlapping the image), when it should be behind the image content (playing behind the banner, and just visible through the transparent "gap" in the screen).
I've used placeholder images for the slides, however those are the actual dimensions of each image we will be using. The images should be "centered" in their slide, with the background color visible. (basically the images are being overlaid onto the colored slides).
HTML
<div class="inner-wrap">
<header>
<div class="contain-to-grid">
<div class="inner-carousel-wrapper">
<div class="inner-carousel">
<div class="slide yellow">
<img class="" src="http://lorempixel.com/350/347/sports" alt="">
</div>
<div class="slide purple">
<img class="" src="http://lorempixel.com/416/347/abstract" alt="">
</div>
<div class="slide red">
<img class="" src="http://lorempixel.com/381/346/city" alt="">
</div>
<div class="slide blue">
<img class="" src="http://lorempixel.com/338/346/transport" alt="">
</div>
<div class="slide green">
<img class="" src="http://lorempixel.com/343/347/nature" alt="">
</div>
<div class="slide orange">
<img class="" src="http://lorempixel.com/361/347/cats" alt="">
</div>
</div> <!-- .inner-carousel -->
<img src="http://i.imgur.com/HodKXD4.png">
</div> <!-- .inner-carousel-wrapper -->
</div>
</header>
</div>
<section class="container">
Notice how the "slides" above are overlapping the ipad square (bottom right of monitor)? The slides should appear "behind" the ipad.
</section>
SCSS
$lesson-blue: #33B2E6;
$lesson-green: #26B789;
$lesson-orange: #F58231;
$lesson-yellow: #FFD648;
$lesson-red: #E43533;
$lesson-purple: #616373;
.inner-carousel-wrapper {
background: black;
}
.inner-carousel {
position: absolute;
float: right;
margin-left: 54.3%;
margin-top: 6.0%;
width: 45.7%;
height: 76%;
}
.inner-carousel .slide {
&.blue {background: $lesson-blue; }
&.green {background: $lesson-green;}
&.orange {background: $lesson-orange;}
&.yellow {background: $lesson-yellow;}
&.red {background: $lesson-red;}
&.purple {background: $lesson-purple;}
img {
margin: 0 auto;
padding: 6%;
width: 60%;
}
}
JS
$('.inner-carousel').slick({
accessibility: false,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
draggable: false,
slide: '.slide'
});

Answer 1

I'm not sure if this is an option for you or not, but you can assign an id to your background image, give it absolute positioning and then alter its z-index. Something like this should work:
HTML
<img id="bg" src="http://i.imgur.com/HodKXD4.png">
CSS
#bg {position:absolute;z-index:2;}
http://codepen.io/anon/pen/ZYRaNE

Answer 2

A couple things together fix this:
.contain-to-grid {
/* background: #333; */
}
.inner-carousel-wrapper {
/* background: black; */
}
.inner-carousel {
z-index: -1;
}
Demo
You'll need to adjust sizing/position a bit, but it should work otherwise.