html - Background images behind navigation bars and positioning -


i'm want little experiment. i'm new css3 , still eagerly learning things.

i'm trying nav bar display/show in div background image sitting above it. key bg image has sit on top of nav bar in image link below.

http://visionsic.github.io/dsw_ii/img/example.jpg

the actual correctly coded functional nav bar here:

http://visionsic.github.io/dsw_ii/test.html

i'm having trouble getting full background image display on top of nav bar.

the background image has width of 704px, , height of 318px. nav bar has height of 65px , same width of 704px. complete height size of div 383px. want stress don't want nav bar overlay image, want bg image, nav bar.

the real non-functional code follows:

.mm_pres_main {    background-image: url(../img/mm_main_tab_d.jpg);    background-size: cover;    background-position: center;    background-repeat: no-repeat;    position: relative;    overflow: auto;  }  .mm_pres_main #mm_lft_nav_div {    margin: 0%;    background-position: 0%;    background-color: #004e27;    max-width: 704px;    max-height: 100px;    background-repeat: no-repeat;    position: relative;  }  .mm_pres_main #mm_lft_nav_div nav {    text-align: center;    max-width: 704px;    width: 100%;    max-height: 100%;    margin-top: 0%;    display: block;    position: absolute;  }  .mm_pres_main #mm_lft_nav_div nav:after {    content: "";    display: table;    clear: both;  }  .mm_pres_main #mm_lft_nav_div nav ul {    padding: 0;    margin: 0;    height: 100%;    width: 100%;    position: relative;  }  .mm_pres_main #mm_lft_nav_div nav ul li {    font-size: 1.1em;    font-family: "gill sans", "gill sans mt", "myriad pro", "dejavu sans condensed", helvetica, arial, sans-serif;    font-weight: lighter;    text-align: center;    list-style: none;    line-height: 1.1em;    position: absolute;    padding: 6.5% 0% 0% 0%;    height: 100px;    width: 60px;    color: #fce011;    display: inline-block;    float: left;    min-width: 20%;    background-color: #004e27;    overflow: auto;  }  .mm_pres_main #mm_lft_nav_div nav ul li.bio_icon,  .mm_pres_main #mm_lft_nav_div nav ul li.stat_icon,  .mm_pres_main #mm_lft_nav_div nav ul li.img_icon,  .mm_pres_main #mm_lft_nav_div nav ul li.vid_icon,  .mm_pres_main #mm_lft_nav_div nav ul li.fut_icon {    position: relative;    max-height: 100px;    max-width: 60px;    width: 100%;    height: 100%;    background-repeat: no-repeat;    background-position: 50% 0%;    background-size: 100px 40px;    display: block;    overflow: auto;  }  .mm_pres_main #mm_lft_nav_div nav ul li.bio_icon {    background-image: url(../svg/bio_ore_ylw.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.stat_icon {    background-image: url(../svg/stats_ore_ylw.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.img_icon {    background-image: url(../svg/img_ore_ylw.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.vid_icon {    background-image: url(../svg/vids_ore_ylw.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.fut_icon {    background-image: url(../svg/fut_ore_ylw.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.bio_icon a,  .mm_pres_main #mm_lft_nav_div nav ul li.stat_icon a,  .mm_pres_main #mm_lft_nav_div nav ul li.img_icon a,  .mm_pres_main #mm_lft_nav_div nav ul li.vid_icon a,  .mm_pres_main #mm_lft_nav_div nav ul li.fut_icon {    clear: left;    position: relative;    display: block;    max-height: 60px;    text-decoration: none;    color: #f6ef1b;    overflow: auto;  }  .mm_pres_main #mm_lft_nav_div nav ul li:hover {    background-color: #f6ef1b;  }  .mm_pres_main #mm_lft_nav_div nav ul li:hover {    color: #004e27;    cursor: pointer;  }  .mm_pres_main #mm_lft_nav_div nav ul li.bio_icon:hover {    background-image: url(../svg/bio_ore_grn.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.stat_icon:hover {    background-image: url(../svg/stats_ore_grn.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.img_icon:hover {    background-image: url(../svg/img_ore_grn.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.vid_icon:hover {    background-image: url(../svg/vids_ore_grn.svg);  }  .mm_pres_main #mm_lft_nav_div nav ul li.fut_icon:hover {    background-image: url(../svg/fut_ore_grn.svg);  }
<!doctype html>  <html>  <!----------------------head content area----------------------------------------------->    <head>    <meta charset="utf-8">    <title>test background nav expirement</title>    <meta name="viewport" content="width=device-width, maximum scale=1.0, minimum scale=1.0, initial-scale=1.0">    <link rel="stylesheet" type="text/css" href="css/subnav.css">  </head>  <!----------------------body content area----------------------------------------------->    <body>    <!----------------------main presentation content area----------------------------------------------->    <div class="mm_pres_main">      <!----------------------left sub-navigational content area----------------------------------------------->      <div id="mm_lft_nav_div">        <nav>          <ul>            <li class="bio_icon"><a href="#bio">bio</a>            </li>            <li class="stat_icon"><a href="#stats">stats</a>            </li>            <li class="img_icon"><a href="#images">images</a>            </li>            <li class="vid_icon"><a href="#videos">videos</a>            </li>            <li class="fut_icon"><a href="#future">future</a>            </li>          </ul>        </nav>      </div>    </div>    </body>    </html>

try add padding main div same size nav's height. set nav position absolute , align bottom of div. make sure main div's position set relative.