Overlaying header over image but not over text - css

Question

I have a list of items where each item contains a header and a text. The item may also contain an image between the header and the text.
If the item contains an image, the header should be overlayed on top of the image.
How can I accomplish this by applying CSS to the following markup (which cannot be changed!):
<div class="wrapper">
<h2>First item</h2>
<img src="MyImage.jpg" width="400" height="200" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque in orci consectetur, auctor risus
sed, adipiscing neque. Integer ornare vestibulum
mauris, quis blandit nibh vestibulum sed.
</p>
</div>
<div class="wrapper">
<h2>Second item</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque in orci consectetur, auctor risus
sed, adipiscing neque. Integer ornare vestibulum
mauris, quis blandit nibh vestibulum sed.
</p>
</div>
I've created a jsfiddle for you to play with: http://jsfiddle.net/9GSB8/
To overlay the header on top of the image I've tried setting "position: absolute" on the header. This works fine, but it will also make the header to be on top of the text when there is no image. This is my problem - to make it work both with and without the image.
Note that the header can be long enough that it will span over two rows.
Any help appreciated! :)