title: HTML Screen resolution
body: <p>I'm having problem with pixels on web page. I have cover image on body and button on it. When page does resize, button is moving too. I want to stay button there where I put it even when screen changes. I'm trying to port website on mobile devices too, that's why I have that problem. P.S I'm new to web programming.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"&gt;
          &lt;title&gt;test page.&lt;/title&gt;
          &lt;style&gt;
              body {
                  background:url("test.jpg");
                  background-size: cover;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;
              }
              #mybutton {
                  position: absolute;
                  right:800px;
                  top:300px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;button id="mybutton" onClick="javascript:alert('clicked!');"&gt;Click Me!&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>