Resize text in a div resize img - css

Question

Unfortunately I have a problem that I just can not solve. I have a picture, which thanks to the css resizes depending on the size of the open window in your browser. But I must enter into this text and textbox. The problem comes when after you have centered the text and textbox with CSS, resizing the browser window, my text and my textbox do not follow the "image" but they go where they want.
for me to understand better my image looks like this: http://i41.tinypic.com/27xe6nm.jpg and I need that to be displayed inside the lines of the text and textbox. As stated previously, however, when the browser auto resizes the image, while placing on the div relative to the texbox text and margin-top: 10%; margin-bottom: 70%; etc. ... the text goes outside of the lines.
my CSS
#text1
{
position:absolute;
height: auto;
margin-left:40%;
margin-right:auto;
margin-top:-35%;
margin-bottom:auto;
width: auto\9;
}
div.imgg img
{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
my HTML
<div class="imgg">
<img src="imgtest.png"/>
<div id="text1">
my text
</div>
</div>

Answer 1

Viewport units to the rescue: http://jsfiddle.net/X6yJB/. And, for older browsers just use a polyfill: http://html5polyfill.com/.
HTML:
<div class="imgg">
<img src="http://i41.tinypic.com/27xe6nm.jpg"/>
<div id="text1">
This example uses viewport units. This family
of measures includes vh, vw, vmin, and vmax. Because
the size of your image is affected by the width, the vw
units are used. Specifically, 1vw is 1% of the viewport
width. As viewport changes, so does your font-size.
Neat, huh?!
</div>
</div>
CSS:
.imgg {
position: relative;
}
.imgg > div {
position:absolute;
top: 2.5vw;
font: normal 2vw/2.5 Sans-Serif;
}
.imgg > img {
max-width: 100%;
width: auto\9;
}

Answer 2

jsBin demo (not perfect, just to get you an idea)
So your image is 100% wide...
Means we need to count your "paper lines" (can't believe I just did that!)
which results in ~23 and use that value to resize the text using CSS3's vw (viewport) unit:
100vw / 23 lines = your approx. font size
<div id="text1">
My text
</div>
#text1{
position:absolute;
background: url(imgtest.png) no-repeat center 0 / 100%;
height:100%;
width:100%;
padding-top: 1.38vw; /* used some here */
padding-left: 2vw;
font-size: calc(100vw / 22); /* But mostly here :) */
line-height: 1.145em;
}