Best solution for text ontop of image - html

Question

I want to make the following element.
Basically an image in top of a page layout, and then a box on top of that image, containing a header and some more text.
But, what is the most optimal way of doing this in regards to responsiveness. I imagine something like the following markup
<div class="header">
<img src="myimage.png" alt="" />
<div class="text">
<h1>Header</h1>
<p>Lorem ipsum</p>
</div>
</div>
And then set .header to position relative, img to max-width of 100%, and .text to position absolute, bottom: -50%, left: 10% etc.
But this does not scale well, and absolute position seems to me, to be a bit invalid in regards to responsiveness. Also, there is content below the element, that should move accordingly to the amount of text, in the text element. If if is positioned absolute, that gets more tricky to manage.
Any ideas to another approach?

Answer 1

Try this:
img {
border: 2px solid black;
}
#container {
position: relative;
}
#example {
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
background-color: white;
border: 2px solid red;
}
<div id="container">
<img src="http://i34.tinypic.com/4tlkci.jpg">
<div id="example">This is my div</div>
</div>