How to position text block over a image?

Question

I have tries to lay text block over image in my HTML website. I have Googled the Internet for a while, and luckily found 4 methods as follows:

 <!--method 1 --> <div style="position: relative; background: url(hknight.jpg); width: 738px; height: 284px;"> <div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;"> <p>(text to appear at the bottom left of the image)</p> </div> <p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;"> (text to appear at the top right of the image) </p> </div> <!--method 2 --> <div style="background:url({{site.baseurl}}assets/hknight.jpg) no-repeat;width:738px;height:284px;text-align:center"> <span style="color:#fcc">some text...</span> </div> <!--method 3 --> <div style="position:relative; width: 738px; height: 284px"> <span style="position:absolute; left:50; bottom:50; color:#fff; font-weight:bold">some text</span> <img src="hknight.jpg"> </div> <!--method 4 --> <TABLE BORDER="0" cellpadding="5" CELLSPACING="0"> <TR> <TD WIDTH="738" HEIGHT="284" BACKGROUND="hknight.jpg" VALIGN="bottom"> <FONT SIZE="+1" COLOR="yellow">some text ...</FONT> </TD> </TR> </TABLE> 

But none of the four methods generate the desired effects as I wish. You can refer to the folowing figures. The 1st method can position text block accurately over the image. However, the image cannot adapt to the screen automatically. For example, if I visit the web page from smart phone, only the left part of the image is displayed. By the way, you can see that the border is like a square with sharp angle. The 2nd method is similar to the 1st one except that text block cannot be laid accurately. The 3rd method adapts the image automatically to screen. The border shows curve lines which looks very good. But I cannot position the text accurately. As you see, in my code I use left:50; bottom:50; left:50; bottom:50; which comes out with text bock only at the top left corner. The 4th method is special with table . The problem is similar to the 1st method in that it borders are sharp and cannot adapt to screen. What is worse, the image is smaller than its original size though I specified the true width and height .

Can you think of a better solution meeting my requirements?

---

EDIT 1 :
For method 3 if I choose em as the position parameter, it works now! I don't know why pixel doesn't show text at the specified position.

EDIT 2 :
My requirements:

1. The image border lines should be curve.
2. The text block should be accurately positioned as I will.
3. The image can adapt to the screen automatically.

Answer 1

Let the image flow vertically inside an overflow:hidden positioned parent.
Position the absolute texts at wish.

 .box{ position: relative; overflow: hidden; color: #fff; border-radius: 10px; } .box img{ width: 100%; } .bottom, .right{ margin:1em; position:absolute; } .bottom{ bottom: 0px; } .right{ right: 0px; top: 0px; } 

 <div class="box"> <img src="http://images2.layoutsparks.com/1/119132/city-lights-building-night.jpg"> <p class="bottom">(text to appear at the bottom left of the image)</p> <p class="right"> (text to appear at the top right of the image)</p> </div>