Carousel not scaling the same way as the background image

Carousel not scaling the same way as the background image

I have the following markup:
<section class="block">
<img class="img-background" src="assets/background_banner.png" alt="" >
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="assets/banner_1.png" alt="" >
</div>
And the CSS like this:
.img-background{
position:absolute;
margin-left:50%;
left:-512px;
top:0px;
z-index:1;
}
.carousel{
position:absolute;
margin-left:50%;
left:-512px;
top:0px;
z-index:2;
}
.carousel .item {
width: 100%; /*slider width*/
height: auto; /*slider height*/
}
.carousel .item img {
margin-left: 0%;
width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767px) {
.block {
margin-left: -20px;
margin-right: -20px;
}
}
It works when the browser is full screen. I have a background image and a
carousel slide on top of that. But when I make the browser smaller the
carousel stays big while the image scales. I want them both to scale the
same way. Is this possible?