Image behind text

Image behind text

I want to display an image behind an H1 tag, I also want the image width
to stretch to the same width as the text.
My code:
<div style="display: inline;">
<img src="http://img585.imageshack.us/img585/3989/m744.png"
width="100%" height="68" />
<h1 style="position: absolute; top: 0px;">Variable length text</h1>
</div>
JSFiddle: http://jsfiddle.net/Aykng/
Current Appearance:

Desired Appearance:

The image width should either stretch or shrink to fill the div, how can I
achieve this?
I want it to be compatible with IE 7+, otherwise I would just use
background-image and background-size.