How do I make a table adjust to the size of it's background image?

I need to put text on top of an image, it's exactly like the profile picture in Facebook where you see the photo and it says change picture on the top right on top of the image.

I created a table and put the text on the top right but the problem is that not all images have the same height and the table cuts some before they end. I don't know how to make the table not to cut my image in half and instead be as long as it's required by the image.

E.G: This code only gets me one line of my image:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300px" valign="top" style="background-image: url(http://www.chusmix.com/Imagenes/grupos/lujan.jpg);">Your text here</td>
</tr>
&l开发者_JS百科t;/table>

Create a Div Put the img on it and create an other div inside that and position it top:0; right:0 and put what ever you want to have it on top right corner of the image ! and pulse it will resize automatically. Check this example i have made.