How to fill an image with text on HTML/CSS and scale it?

I have some text I'd like to insert inside an image and scale the image according to the length of that text.

I chose an approach in which I set the image as background o开发者_JAVA百科f a div and I fill in the div with text.

I tried already a lot of CSS stuff and I couldn't make the background height fit the div height (text length).

All I can find around is how to make backgrounds for the whole screen and rescale them; not anything about this. Help?

If you are able to make use of CSS3 properties you could use

background-size: 100% contain;

On your div. If not you will have to do some trickery with absolute positioning and javascript to calculate the size.

Did you mean something like this? It is just HTML & CSS.

http://jsfiddle.net/mqchen/Bcmy3/

It unfortunately uses an extra element to bring the text in front of the image, and an element for the image itself. However, if you can, us the CSS3 option Chris suggested.

Without CSS3, you can't stretch a background. You'll need to use an img tag and some JavaScript.

var img = document.getElementById("stretchImg");
var textSpan = document.getElementById("imgText");
img.style.height = textSpan.offsetHeight;