title: How to make image/buttons stay in place when re-sizing web browser
body: <p>This is my image-button for my website. <a href="http://puu.sh/cK7Sf/6309c39cdb.jpg" rel="nofollow">http://puu.sh/cK7Sf/6309c39cdb.jpg</a> When I re-size my browser it goes over here <a href="http://puu.sh/cK7VU/f17dafcc41.jpg" rel="nofollow">http://puu.sh/cK7VU/f17dafcc41.jpg</a></p>
  
  <p>Here is my code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="Nav"&gt;
      &lt;div id="buttons"&gt;
          &lt;a href="/"&gt;&lt;div id="home_button"&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#home_button {
  background-image: url("home.png");
  background-repeat:no-repeat;
  background-size: 100%;
  width: 150px;
  height: 60px;
  position: absolute;
  top: 196px;
  left: 502px;
  z-index: 10;
  }
  </code></pre>