title: CSS images different position on different resolutions?
body: <p>Ok so i've made a simple webpage with an external CSS, now it appears fine on my computer but when i send it to my friend the bottom buttons are not together?</p>
  
  <p>My Monitor
  <a href="http://i.imgur.com/ektmF.png" rel="nofollow">http://i.imgur.com/ektmF.png</a></p>
  
  <p>Friends Monitor
  <a href="http://i.imgur.com/RmB3t.png" rel="nofollow">http://i.imgur.com/RmB3t.png</a></p>
  
  <p>HTML Code</p>
  
  <pre><code>    &lt;body&gt;
  
  &lt;style type="text/css"&gt;
  body {
      overflow:hidden;     &lt;!-- Setting body overflow to hidden --&gt;
  }
  
  &lt;!-- Background image --&gt;
  
  
  
      &lt;/style&gt;
  
      &lt;div id="backgroundWrapper"&gt;
          &lt;img src="background.png" /&gt;      
      &lt;/div&gt;
  
      &lt;!-- Home button --&gt;   
  
      &lt;div id="homebtn"&gt;
          &lt;a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"&gt;&lt;img name="homebtn" src="homebuttonup.png"/&gt;   
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Shop Button --&gt;
  
      &lt;div id="shopbtn"&gt;
          &lt;a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"&gt;&lt;img name="shopbtn" src="shopbuttonup.png"/&gt;  
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>CSS Code</p>
  
  <pre><code> #backgroundWrapper{width:100%;height:100%;z-index:-1;position:absolute;}
       #backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
       #homebtn {width:100%;height:100%;z-index:1; position:absolute;top:90%; left:35.3%;}
       #shopbtn  {width:100%;height:100%;z-index:1;position:absolute; top:90%; left:50%;}
       #text {
       color:black;
       font-size:15;
       text-align:center;
       position:relative;
       top:20%;
       font-family:verdana;
       font-weight:bold;
       }
       #myform {
      position:absolute;
       left:10%;
       top:30%;
  
       }
  
  
        #submitbuttons {
      position:relative;
      text-align:center;
       top:80%;
  
       }
  
  
  
  
      body {
       margin-top: 0px;
       margin-right: 0px;
       margin-bottom: 0px;
       margin-left: 0px
      }
  </code></pre>