Как добавить карту в качестве фона JumboTron

Question

EDIT: jsfiddle

У меня есть листовку карта, которая создается с помощью HTML:

<div id="map"></div> 

И в 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> 

с следующий стиль

.jumbotron { 
    color: white; 
    text-shadow: #444 0 1px 1px; 
    background:transparent; 
    background-size: 100%; 
    margin-bottom:0; 
} 

Как создать карту в качестве фона jumbotron?

EDIT:

CSS-

#map { height: 180px; } 

в 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

Теперь он получил решение: я установил высоту и MarginBottom в mapDiv с яваскрипт и добавить позицию: относительная ;

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; 

}