title: Image behind the link
body: <p>So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;div id="about"&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a {
      text-decoration:none;
      color: white;
      background: url(images/hover.png);
      width: 100%;
      height: 38px;
  }
  
  #about {
      background: url(images/button.png);
      width: 168px;
      height: 51px;
      font-family: Anivers;
      font-size: 20pt;
      text-align: center;
      color: white;
      line-height: 50px;
      vertical-align: middle;
      margin-top: 1%;
  }
  </code></pre>
  
  <p>So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).  </p>