Bootstrap: Overlapping header/footer/content on top of full-screen carousel? - html

Question

I'm using the basic fullscreen carousel from Bootstrap. It's working great, full screen. The issue is I need to add a custom header and footer to it (along with a little bit of text in the center). I want the header and footer to overlap the carousel (as if the carousel is in the background). Is this possible? I've tried playing around with z-index a bit, no success so far.
Here's the code for the carousel.
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- 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 for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></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>

Answer 1

Update 1.0
I already adjust from my template.Hope you learn something from my coding.
HTML
<div class="wrapper">
<div class="nav-bar-area">
<div class="menu">
<div id="text">Menu</div>
<div id="image"><img src="http://www.rcunlocks.com/IMG_0468.PNG" /></div>
</div>
<div class="nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Careers</li>
<li>Contact US</li>
</ul>
</div>
</div>
<div class="container--head">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-tooltip">
<div class="caraousel-tooltip-item active" data-index="0">
<a href="#" class="tooltip-carousel" style="top:100px;left: 100px;padding:5px 10px;background:#f00;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Wicked Sick">
<span class="fa fa-heart"></span>
</a>
<a href="#" class="tooltip-carousel" style="top:120px;left: 400px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="First Blood">
<span class="fa fa-star"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="1">
<a href="#" class="tooltip-carousel" style="top:120px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="top" data-content="NeverMore">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="2">
<a href="#" class="tooltip-carousel" style="top:100px;left: 500px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Pudge">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="3">
<a href="#" class="tooltip-carousel" style="top:20px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="right" data-content="Hello World">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="4">
<a href="#" class="tooltip-carousel" style="top:180px;left: 200px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" >
<span class="fa fa-plus"></span>
</a>
</div>
</div>
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://blogs-images.forbes.com/rogerkay/files/2014/06/dell-background-2.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Dell</h3>
Bring The Game
</div>
</div>
<div class="item">
<img src="http://www.techarena.co.ke/wp-content/uploads/2015/02/acer-on-black-wallpapers_30230_1920x1080.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Acerr</h3>
Just Starting
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://orig08.deviantart.net/3f83/f/2012/097/c/b/hp_in_dark_by_yarinsl45-d4vak5s.png" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Hello World</h3>
The Taste Can't Describe
</div>
</div>
</div>
<!-- Controls -->
</div>
</div>
</div>
<!-- Fontawesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS
.body {
background-color: #bbb;
}
.container--head {
background: #BF3E11;
}
.tooltip-carousel {
position: absolute;
z-index: 11;
border-radius: 50%;
}
.caraousel-tooltip-item {
display: none;
}
.caraousel-tooltip-item.active {
display: block;
}
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
.nav-bar-area{
width: 100%;
height: 60px;
background-color: #000;
padding: 0;
margin:0 auto;
position:relative;
}
ul{
margin: 0 auto;
padding: 0;
width: 600px;
height: 60px;
}
ul li{
display:inline;
float:left;
padding: 10px 10px 10px 8px;
margin: 0 3% 0 0;
color: #fff;
cursor:pointer;
line-height: 225%;
}
li:hover{
background-color: #888888;
}
.menu{
display:none;
color:#fff;
font-weight:bold;
}
#text{
float:left;
}
#image{
float:right;
cursor:pointer;
}
#media screen and (max-width: 600px){
.nav-bar-area{
height:auto;
overflow:auto;
}
ul{
width: 100%;
height: auto;
display:block;
overflow: hidden;
}
ul li{
width: 50%;
float:left;
position: relative;
display:block;
margin: -1px;
padding: 10px 0 10px 0;
text-indent: 25px;
border-bottom: 1px solid #888888;
border-right: 1px solid #888888;
}
.nav-bar{
display:block;
}
}
#media screen and (max-width: 480px){
.menu{
display:block;
padding: 20px 0 40px 0;
border-bottom: 1px solid #fff;
}
#text{
margin: 0 0 0 20px;
}
#image{
margin: 0 30px 0 0;
}
.nav-bar{
display:none;
}
.nav-bar{
font-size: 0.8em;
}
}
JS
$(function(){
$('.tooltip-carousel').popover();
$('#carousel-example-generic').on('slide.bs.carousel', function () {
$('.tooltip-carousel').popover('hide');
$(this).find('.caraousel-tooltip-item.active').fadeOut(function(){
$(this).removeClass('active');
});
});
$('#carousel-example-generic').on('slid.bs.carousel', function () {
var index = $(this).find('.carousel-inner > .item.active').index();
$(this).find('.caraousel-tooltip-item').eq(index).fadeIn(function(){
$(this).addClass('active');
});
//alert(index);
});
$('.tooltip-carousel').mouseenter(function(){
$(this).popover('show');
}).mouseleave(function(){
$(this).popover('hide');
});
});
Here is the DEMO.