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.