title: Overlay Text On ImageButton
body: <p>Does anyone know of an easy way to display text over top of an image? One solution I've found is to just do the following:</p>
  
  <pre><code>&lt;img id='img1' src='myimage.jpg'&gt;
  &lt;div style='position:relative; top:-30px'&gt; MY TEXT TO DISPLAY ON IMAGE&lt;/div&gt;
  </code></pre>
  
  <p>This will cause the Div and all of its contents to move up 30 pixels. The problem is that I do not know the height of my image. However, I do know the width. Also, there could be many dynamic images on my page that need to have overlaid text and I do not necessarily know the absolute position of the image at runtime on the server.</p>
  
  <p>I also haven't had much success with making the image a background image because I haven't been able to get it to show the full image--it just shows enough of the image to put behind the div. If you have any suggestions or need more information please let me know.</p>
  
  <p>PS: I'm open to a client-side solution like javascript/JQuery.</p>