You will need something like this:
<style type="text/css">
#text-wrapper {
background: url('./yourimage.png') no-repeat;
display: table;
height: height of the background image;
text-align: center;
width: width of the background image;
}
#text-wrapper span {
display: table-cell;
vertical-align: middle;
}
</style>
<div id="text-wrapper">
<span>This is where your text goes</span>
</div>
However as I would personally recommend avoiding the display: table; vertical alignment hack (you'd need to add some absolute positioning in IE only, to get it to work in IE), you should use padding instead, so you'll want some CSS more like this:
<style type="text/css">
#text-wrapper {
background: url('./yourimage.png') no-repeat;
height: height of the background image;
text-align: center;
width: width of the background image;
}
#text-wrapper span {
display: block;
padding: as necessary until the height+width of the background is filled;
}
</style>
