text on image html css3

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

<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;
    }

Answer 2

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 3

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 4

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");

}