i'm deep practice of rwd in project. have nav bar , background image applied css background-size: contain; property.
as resize browser window smaller width in view port, nav bar begins break away image , scaling background image. there additional css apply have nav bar attach magnet bottom of background image?
will ems fix that?
here's live example - (shrink browser window width , watch break apart):
html & css code:
#aside_sect_mm { margin: 0%; background-image: url(../img/mm_main_tab_c.jpg); background-size: contain; width: 100%; max-width: 704px; height: 318px; background-repeat: no-repeat; position: relative; } #aside_sect_mm nav { text-align: center; max-width: 704px; width: 100%; max-height: 100%; top: 100%; display: block; position: relative; } #aside_sect_mm nav:after { content: ""; display: table; clear: both; } #aside_sect_mm nav ul { padding: 0; margin: 0; height: 100%; width: 100%; position: relative; } #aside_sect_mm 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; } #aside_sect_mm nav ul li.bio_icon, #aside_sect_mm nav ul li.stat_icon, #aside_sect_mm nav ul li.img_icon, #aside_sect_mm nav ul li.vid_icon, #aside_sect_mm 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; } #aside_sect_mm nav ul li.bio_icon { background-image: url(../svg/bio_ore_ylw.svg); } #aside_sect_mm nav ul li.stat_icon { background-image: url(../svg/stats_ore_ylw.svg); } #aside_sect_mm nav ul li.img_icon { background-image: url(../svg/img_ore_ylw.svg); } #aside_sect_mm nav ul li.vid_icon { background-image: url(../svg/vids_ore_ylw.svg); } #aside_sect_mm nav ul li.fut_icon { background-image: url(../svg/fut_ore_ylw.svg); } #aside_sect_mm nav ul li.bio_icon a, #aside_sect_mm nav ul li.stat_icon a, #aside_sect_mm nav ul li.img_icon a, #aside_sect_mm nav ul li.vid_icon a, #aside_sect_mm nav ul li.fut_icon { clear: left; position: relative; display: block; max-height: 60px; text-decoration: none; color: #f6ef1b; overflow: auto; } #aside_sect_mm nav ul li:hover { background-color: #f6ef1b; } #aside_sect_mm nav ul li:hover { color: #004e27; cursor: pointer; } #aside_sect_mm nav ul li.bio_icon:hover { background-image: url(../svg/bio_ore_grn.svg); } #aside_sect_mm nav ul li.stat_icon:hover { background-image: url(../svg/stats_ore_grn.svg); } #aside_sect_mm nav ul li.img_icon:hover { background-image: url(../svg/img_ore_grn.svg); } #aside_sect_mm nav ul li.vid_icon:hover { background-image: url(../svg/vids_ore_grn.svg); } #aside_sect_mm nav ul li.fut_icon:hover { background-image: url(../svg/fut_ore_grn.svg); }<!doctype html> <html> <head> <meta charset="utf-8"> <title>nav bar test</title> <link href="css/test.css" rel="stylesheet" type="text/css"> </head> <body> <section id="aside_sect_mm"> <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> </ul> </nav> </section> </body> </html>
how doing kind of approach instead. having background image , making responsive bit hard. make image embedded html instead, make responsiveness easier.
#splash-area img { vertical-align: bottom; width: 100%; } #aside_sect_mm { margin: 0%; width: 100%; max-width: 704px; position: relative; } #aside_sect_mm nav { text-align: center; max-width: 704px; width: 100%; max-height: 100%; top: 100%; display: block; position: relative; } #aside_sect_mm nav:after { content: ""; display: table; clear: both; } #aside_sect_mm nav ul { padding: 0; margin: 0; height: 100%; width: 100%; position: relative; } #aside_sect_mm 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; } #aside_sect_mm nav ul li.bio_icon, #aside_sect_mm nav ul li.stat_icon, #aside_sect_mm nav ul li.img_icon, #aside_sect_mm nav ul li.vid_icon, #aside_sect_mm 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; } #aside_sect_mm nav ul li.bio_icon { background-image: url(../svg/bio_ore_ylw.svg); } #aside_sect_mm nav ul li.stat_icon { background-image: url(../svg/stats_ore_ylw.svg); } #aside_sect_mm nav ul li.img_icon { background-image: url(../svg/img_ore_ylw.svg); } #aside_sect_mm nav ul li.vid_icon { background-image: url(../svg/vids_ore_ylw.svg); } #aside_sect_mm nav ul li.fut_icon { background-image: url(../svg/fut_ore_ylw.svg); } #aside_sect_mm nav ul li.bio_icon a, #aside_sect_mm nav ul li.stat_icon a, #aside_sect_mm nav ul li.img_icon a, #aside_sect_mm nav ul li.vid_icon a, #aside_sect_mm nav ul li.fut_icon { clear: left; position: relative; display: block; max-height: 60px; text-decoration: none; color: #f6ef1b; overflow: auto; } #aside_sect_mm nav ul li:hover { background-color: #f6ef1b; } #aside_sect_mm nav ul li:hover { color: #004e27; cursor: pointer; } #aside_sect_mm nav ul li.bio_icon:hover { background-image: url(../svg/bio_ore_grn.svg); } #aside_sect_mm nav ul li.stat_icon:hover { background-image: url(../svg/stats_ore_grn.svg); } #aside_sect_mm nav ul li.img_icon:hover { background-image: url(../svg/img_ore_grn.svg); } #aside_sect_mm nav ul li.vid_icon:hover { background-image: url(../svg/vids_ore_grn.svg); } #aside_sect_mm nav ul li.fut_icon:hover { background-image: url(../svg/fut_ore_grn.svg); }<!doctype html> <html> <head> <meta charset="utf-8"> <title>nav bar test</title> <link href="css/test.css" rel="stylesheet" type="text/css"> </head> <body> <div id="splash-area"><img src="http://visionsic.github.io/dsw_ii/img/mm_main_tab_c.jpg"/></div> <section id="aside_sect_mm"> <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> </ul> </nav> </section> </body> </html>#aside_sect_mm { margin: 0%; background-image: url(../img/mm_main_tab_c.jpg); background-size: contain; width: 100%; max-width: 704px; height: 318px; background-repeat: no-repeat; position: relative; } #aside_sect_mm nav { text-align: center; max-width: 704px; width: 100%; max-height: 100%; top: 100%; display: block; position: relative; } #aside_sect_mm nav:after { content: ""; display: table; clear: both; } #aside_sect_mm nav ul { padding: 0; margin: 0; height: 100%; width: 100%; position: relative; } #aside_sect_mm 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; } #aside_sect_mm nav ul li.bio_icon, #aside_sect_mm nav ul li.stat_icon, #aside_sect_mm nav ul li.img_icon, #aside_sect_mm nav ul li.vid_icon, #aside_sect_mm 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; } #aside_sect_mm nav ul li.bio_icon { background-image: url(../svg/bio_ore_ylw.svg); } #aside_sect_mm nav ul li.stat_icon { background-image: url(../svg/stats_ore_ylw.svg); } #aside_sect_mm nav ul li.img_icon { background-image: url(../svg/img_ore_ylw.svg); } #aside_sect_mm nav ul li.vid_icon { background-image: url(../svg/vids_ore_ylw.svg); } #aside_sect_mm nav ul li.fut_icon { background-image: url(../svg/fut_ore_ylw.svg); } #aside_sect_mm nav ul li.bio_icon a, #aside_sect_mm nav ul li.stat_icon a, #aside_sect_mm nav ul li.img_icon a, #aside_sect_mm nav ul li.vid_icon a, #aside_sect_mm nav ul li.fut_icon { clear: left; position: relative; display: block; max-height: 60px; text-decoration: none; color: #f6ef1b; overflow: auto; } #aside_sect_mm nav ul li:hover { background-color: #f6ef1b; } #aside_sect_mm nav ul li:hover { color: #004e27; cursor: pointer; } #aside_sect_mm nav ul li.bio_icon:hover { background-image: url(../svg/bio_ore_grn.svg); } #aside_sect_mm nav ul li.stat_icon:hover { background-image: url(../svg/stats_ore_grn.svg); } #aside_sect_mm nav ul li.img_icon:hover { background-image: url(../svg/img_ore_grn.svg); } #aside_sect_mm nav ul li.vid_icon:hover { background-image: url(../svg/vids_ore_grn.svg); } #aside_sect_mm nav ul li.fut_icon:hover { background-image: url(../svg/fut_ore_grn.svg); } <!doctype html> <html> <head> <meta charset="utf-8"> <title>nav bar test</title> <link href="css/test.css" rel="stylesheet" type="text/css"> </head> <body> <section id="aside_sect_mm"> <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> </ul> </nav> </section> </body> </html> 