title: How to align elements on the background?
body: <p>I am trying to make a homepage on my website with 4 round buttons in a row and I want them to be on a horizontal line that is drawn on the background image.
  Of Course I want them to stay aligned to the line even when the browser windows is resized but I have no idea how to do this or if this is even possible.</p>
  
  <p>I tried working with percentages both on the background and on the buttons, but the buttons resize into the upper left corner so they wont stay even with the background.</p>
  
  <p><strong>EDIT - 
  got it almost working, the only problem I have is that it is not aligning perfect on the percentages, when the window is really small the buttons go a little bit under the line and when the window is bigger the button goes a little bit above the line.</strong></p>
  
  <p>My HTML</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css"/&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body id="menu-body"&gt;
      &lt;div id="menu-div"&gt;
          &lt;h1&gt;&lt;/h1&gt;
          &lt;div id="menu"&gt;
              &lt;a href="" class="menu-link"&gt;&lt;img src="" alt="" class="menu-img"/&gt;&lt;/a&gt;
              &lt;a href="" class="menu-link"&gt;&lt;img src="" alt="" class="menu-img"/&gt;&lt;/a&gt;
              &lt;a href="" class="menu-link"&gt;&lt;img src="" alt="" class="menu-img"/&gt;&lt;/a&gt;
              &lt;a href="" class="menu-link"&gt;&lt;img src="" alt="" class="menu-img"/&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>#menu-body {
      background-image: url('../img/background.png');
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: #1B1B1B;
  }
  
  #menu-div {
      width: 100%;
  }
  
  #menu {
      width: 100%;
  }
  
  .menu-img {
      float: left;
      width: 24%;
      margin-top: 15%;
  }
  </code></pre>