css - Text on Image stays in place despite image resizing -

i made quick web design has 3 images.

as browser size decreases, pictures, stay in visible sight.

now tried put text on images, text moves around browser resizing.

basically, want text stay in 1 spot on picture, picture sizes decrease.

here jsfiddle: http://jsfiddle.net/jwgur/

you notice text not on image because window small. try making window bigger, , text go onto images. want text stay in place despite browser size.

here css text:

.imgtext {     display: inline-block;      text-align: center;      margin: 0;      padding: 250px 0 0 200px;      position: absolute;     font-size: 25px;     width: auto;     height: auto;     color:white; } 

this want: http://jsfiddle.net/mrlister/jwgur/10/

<div class="figure">     <div class="figcaption">text1</div>     <img src="path/to/image"> </div> 

(or can use real html5 , use actual <figure> , <figcaption> elements.)

the css:

.figure {     position: relative;     display: inline-block;     max-width: 33%; }  .figure .figcaption {     text-align: center;      width:100%; height:0;     font-size: 25px; line-height: 0;     color:white;     position:absolute; top:50%;     z-index:1; }  .figure img {     display:block;     max-width: 100%;  } 

you can lose whitespace between images if want, giving .figure elements float:left. (and doing clear after).