html - How can I add a cover image that sits on top of my bootstrap carousel? -

i have 3 images rotating in full page carousel. i'm trying add "cover" image, speak, sits on top of 3 rotating. image have cutout allows see 3 rotating behind it. i'm not sure place image in html or css like.

<header id="mycarousel" class="carousel">     <!-- indicators -->     <ol class="carousel-indicators">         <li data-target="#mycarousel" data-slide-to="0" class="active"></li>         <li data-target="#mycarousel" data-slide-to="1"></li>         <li data-target="#mycarousel" data-slide-to="2"></li>     </ol>      <!-- wrapper slides -->     <div class="carousel-inner">         <div class="item active">             <!-- set first background image using inline css below. -->             <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=slide one');"></div>             <div class="carousel-caption">                 <h2>caption 1</h2>             </div>         </div>         <div class="item">             <!-- set second background image using inline css below. -->             <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=slide two');"></div>             <div class="carousel-caption">                 <h2>caption 2</h2>             </div>         </div>         <div class="item">             <!-- set third background image using inline css below. -->             <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=slide three');"></div>             <div class="carousel-caption">                 <h2>caption 3</h2>             </div>         </div>     </div>      <!-- controls -->     <a class="left carousel-control" href="#mycarousel" data-slide="prev">         <span class="icon-prev"></span>     </a>     <a class="right carousel-control" href="#mycarousel" data-slide="next">         <span class="icon-next"></span>     </a>  </header>  <script> $('.carousel').carousel({     interval: 500, //changes speed     pause: false }) </script>  html, body {     height: 100%; }  .carousel, .item, .active {     height: 100%; }  .carousel-inner {     height: 100%; }  .fill {     width: 100%;     height: 100%;     background-position: center;     -webkit-background-size: cover;     -moz-background-size: cover;     background-size: cover;     -o-background-size: cover; } 

not 100% sure if understood question. add div inside header tag, on top , make absolute positioned sit on top. adjust z-index if needed , don't forget have header position: relative.