text on image html css3 - css

Question

I try to put text in image and email that image so I do this
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/bd.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>
When I check email .. image is displayed but text is displayed under image . not on image so how I display text on image

Answer 1

To display absolute positioned element relatively to the parent, not screen, you need to set position: relative to the parent (to the table in your case). In this example the image is under the text and the text is positioned relatively to the image:
table {
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 100px;
font-weight: bold;
left: 150px;
top: 350px;
}
<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>

Answer 2

You must set img has position: relative;
img {
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: black;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 150px;
}
<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://thumb9.shutterstock.com/display_pic_with_logo/436114/274833056/stock-vector-sample-grunge-retro-red-isolated-ribbon-stamp-sample-stamp-sample-sample-sign-274833056.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>

Answer 3

Why don't you make the image the background image of the paragraph but you have to adjust the size as your image to make it visible
#text {
background-image: url("images/bd.jpg");
}

Answer 4

<table width="400" class="main" border="0" cellpadding="0" cellspacing="0">
<td>
<img src="images/bd.jpg" border="0" />
<p id="text">
Hello
</p>
</td>
</tr>
</table>
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 0;
}
table{
position:relative;
}