How to add a map as the background of jumbotron - css

Question

EDIT: jsfiddle
I have a leaflet map which is created by the html:
<div id="map"></div>
And a jumbotron
<div class="jumbotron">
<h1>Example Unit</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
with the following style
.jumbotron {
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
background-size: 100%;
margin-bottom:0;
}
How do I make the map as the background of the jumbotron?
EDIT:
the css
#map { height: 180px; }
the js
var map = L.map('map').setView([38.578, -77.243], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

Answer 1

Now it got the solution: I set the height and marginBottom of the mapDiv with javascript and add position:relative;
JS
var map = L.map('map').setView([38.578, -77.243], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/mapid/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var height=document.querySelector('.jumbotron').offsetHeight;
document.getElementById('map').style.height=height+"px";
document.getElementById('map').style.marginBottom="-"+height+"px";
CSS
html,body {
height:100%;
}
.jumbotron {
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
background-size: 100%;
margin-bottom:0;
overflow: hidden;
position: relative;
}
.navbar {margin-bottom:0; }
#map { height: 0px;
margin:-30px -30px -0px -30px;
z-index:0;
}
.jumbotron h1,.jumbotron p
{
z-index:100;
position:relative;
}