Write something over an image html - html

Question

How I write a text into a photo?
<img src"photo.png" />TEXT
I have to do with css position absolute and relative? I know it works with position absolute and relative but it is another way to do and how is the best way? If is the only way with position absolute and relative, position relative must be the main photo and position absolute the content(TEXT) ?

Answer 1

you can do like this
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5a/SMirC-hi.svg" /><div style="position:relative; left:120px;top:-150px">TEXT</div>
for demo
http://jsfiddle.net/5CSej/

Answer 2

try something like this,but this is with absolute and relative
<tr>
<div class="image">
<img alt="" src="http://www.YourDomain.com/img/yourImage.jpg" />
<div class="text">
<p>This is some demonstration text</p>
<p>This is some more wonderful text</p>
</div>
</div>
</tr>
ur css
.image {
position:relative;
}
.image .text {
position:absolute;
top:10px;
left:10px;
width:300px;
}
This will place text directly on an image

Answer 3

okay, here is another method to add a text over the image..the condition is you have to use a background image. Here is the Demo.
div:before{
content: "";
position:absolute;
background:url('http://lorempixel.com/400/400') no-repeat;
width:400px; height:400px;
z-index:-1;
}
<div><h1>Look at ME!</h1></div>