title: During window resize, background image scales away from nav bar
body: <p>I'm deep into a practice of RWD in a project. I have a <code>nav</code> bar and a background image to which I applied a CSS <code>background-size: contain;</code> property.</p>
  
  <p>As I resize the browser window to be a smaller width in the view port, The <code>nav</code> bar begins to break away from the image and also is scaling the background image. Is there any additional CSS I could apply to have the <code>nav</code> bar attach like a magnet to the bottom of the background image?</p>
  
  <p>Will ems help fix that?</p>
  
  <p>Here's a <a href="http://visionsic.github.io/DSW_II/test.html" rel="nofollow">live example</a> - (shrink the browser window width and watch it break apart):</p>
  
  <p><strong>HTML</strong> &amp; <strong>CSS</strong> code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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 a {
    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 a {
    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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;nav bar test&lt;/title&gt;
    &lt;link href="css/test.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;section id="aside_sect_mm"&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li class="bio_icon"&gt;&lt;a href="#bio"&gt;Bio&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="stat_icon"&gt;&lt;a href="#stats"&gt;Stats&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="img_icon"&gt;&lt;a href="#images"&gt;Images&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="vid_icon"&gt;&lt;a href="#videos"&gt;Videos&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="fut_icon"&gt;&lt;a href="#future"&gt;Future&lt;/a&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>