CSS Text over image (width 100%) without absolute position - html

Question

I have an image with width 100% so that it enlarges with the window's size. How can I place texts over it so that they enlarge in the same proportion as the image does?
HTML:
<div class=instructables>
<h1>
I N S T R U C T A B L E S
</h1>
<img src="http://i.imgur.com/QvCRbHp.jpg" width="100%"/>
<div class=projects>
9
</div>
</div>
CSS:
.instructables {
margin-top: 150px;
margin-bottom: 200px;
margin-left: 150px;
margin-right: 150px;
letter-spacing: 2px;
line-height: 2;
font-size: 15px;
position: relative;
}
.projects{
position: absolute;
top: 140px;
left: 285px;
font-size: 350%;
font-family: Georgia, Serif;
color: #424242;
}
I tried using position: absolute; and obviously it doesn't work as the text just stay in the same place even if the image is enlarged.
Thank you!
Update: So basically I have this section on my website
http://i.imgur.com/q5kaxMM.png
with a jpg (robot and words) and numbers. When I enlarge the window, the jpg enlarges, but the numbers stay the same (in terms of size and position)
http://i.imgur.com/4nhdnl2.png
My goal is to make the entire section looks exactly the same as the 1st image, no matter how I enlarge the window.

Answer 1

Definitely need some media query love here. I'd suggest starting with some basic styles and add as needed. These can get you started, you can add as many as you like and adjust as you like.
#media screen and (max-width: 480px) {
.projects {font-size: 15px;}
}
#media screen and (min-width: 800px) {
.projects {font-size: 25px;}
}
#media screen and (min-width: 1200px) {
.projects {font-size: 40px;}
}

Answer 2

You were quite close with the position: absolute;. I think the best you can do, is position the text (.projects) with percents. That's way it's not locked on a fixed, pixel position.
Have a look: https://jsfiddle.net/v1u01md3/1/
It's not foolproof, for example when you make the screen really small. But that could be fixed with some media queries.

Answer 3

Have you tried using mediaqueries to adjust your text position/size?
Here is a good overview: https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 4

You can use background-image instead img and put a text over without position: absoulte like this:
#wrapper {
position: relative;
width: 100%;
height: 300px;
background: url('path/to/img') no-repeat top;
background-size: cover;
text-align: center;
}
jsFiddle

Answer 5

The idea to make that work is that you have to include inside an element with position relative all elements with position absolute.
Here is a working example modifying your code. HTML here:
<div class="instructables">
<div class="projects">
<h1>
I N S T R U C T A B L E S
</h1>
<img src="http://i.imgur.com/QvCRbHp.jpg" width="100%"/>
<span>9</span>
</div>
</div>
and the CSS here:
.instructables {
letter-spacing: 2px;
line-height: 2;
font-size: 15px;
position: relative;
}
.projects{
position: absolute;
top: 140px;
left: 285px;
font-size: 15px;
font-family: Georgia, Serif;
color: #424242;
}
h1
{
position: absolute;
}
span
{
position: absolute;
}