title: How to position a button in a specific location of a background image HTML
body: <p><a href="https://i.stack.imgur.com/4Sn7b.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Sn7b.jpg" alt="enter image description here"></a></p>
  
  <p>I am new to HTML and CSS. I learned the basics from codeacademy, and there is a lot for me to learn. I started making a website using a template and began editing on Dreamweaver. 
  One question that I had was about centering the button (in the attached image above) in the middle of the cell present in the background image. This will seem as if you are clicking on the nucleus of the cell to Enter the website. I am not exactly sure about how I would do that. I want to make sure that it is in the exact same position regardless of the browser/screen size that I have.
  This is the CSS3 code for the background image and the button in the header:</p>
  
  <pre><code>#header {
      position: relative;
      background-image: url("../../images/header.jpg");
      background-s[![enter image description here][1]][1]ize: cover;
      background-position: center center;
      background-attachment: fixed;
      color: #fff;
      text-align: center;
      padding: 7.5em 0 2em 0;
      cursor: default;
  
  
  #header .button {
          display: inline-block;
          border-radius: 100%;
          width: 4.5em;
          height: 4.5em;
          line-height: 4.5em;
          text-align: center;
          font-size: 1.25em;
          padding: 0;
      }
  </code></pre>