title: Using a background image for a button. How can I resize the button based on the length of the text?
body: <p>I'm just starting to learn html and css. I am using a background image for my button. How can I resize the button so all the text fits within it. </p>
  
  <p>Here is my css code</p>
  
  <pre><code>#header a{
  display: compact;
  background: url("images/tab.gif") no-repeat scroll left top transparent;
  color: #FFFFCC;
  text-decoration: none;
  padding: 0.75em 1em .025em;
  background-size: contain;
  }
  </code></pre>
  
  <p>Heres the html: </p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt; &lt;a href=""&gt;Overview&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href=""&gt;This text is too long&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>