title: Aligning content with background-image
body: <p>I have this picture that I want to make a webpage with:</p>
  
  <p><a href="https://i.stack.imgur.com/FsY6H.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FsY6H.jpg" alt="picture"></a></p>
  
  <p>The included HTML and CSS have it so that the page looks like this when I view it on Firefox full screen:</p>
  
  <p><a href="https://i.stack.imgur.com/YwjU4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YwjU4.jpg" alt="firefox"></a></p>
  
  <p>Which is just what I want, but I can't figure out a combination of button position and background-image-size that make it so when the page is resized, the button shrinks and moves with the 'sun' so that the 'sun' remains covered. What is the method to do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);
  @import url(http://fonts.googleapis.com/css?family=Open+Sans);
  
  body{
    position: fixed;
    background-image: url("dHbl8SP.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 5000px;
    background-position: top center;
      background-attachment: fixed;
  }
  
  .purple{
    color: rgb(0,100,200);
    border-radius: 50%;
    background-color: rgb(55,0,55);
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: 17pt;
    position:inherit;
    top: 202px;
    left: 679px;
    height: 183px;
    width: 183px;
    border-style: solid;;
    border-color: rgb(15,0,15);
  }
  .purple:hover{
    top: 198px;
    left: 675px;
    height: 191px;
    width: 191px;
  }
  .purple:active{
    background-color: rgb(45,0,45);
    color: rgb(0,150,150);
  }
  footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0px;
    heigth: 8px;
    align-self: stretch;
    background-color: rgba(8,8,8,.75);
    color: rgb(250,250,200);
    font-family: "Open Sans", sans-serif;
    font-size: 10pt;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;KavCloud&lt;/title&gt;
    &lt;meta charset="UTF-8"/&gt;
    &lt;link href="kavCloud.css" rel="stylesheet"  type = "text/css" /&gt;
    &lt;script src="kavCloudScriptingOne.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
  
    &lt;/header&gt;
  
    &lt;button type = "button" onClick = "f1()" class="purple"&gt;Button&lt;/button&gt;
    &lt;footer&gt;Page by Sean Robert Letendre&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>