How to Overlay Text on Image Using HTML with no CSS?

Question

I wanted to have a full-width call-to-action banner on my client's website. The template that my client has does not support CSS, so I'm making use of like old school HTML to build pages.

I have a background image for the img src and I want to overlay the text in it. I'm in need of a code that is working since I'm really not well-versed.

I searched up for solutions in adding overlay text to a background image, but most of the answers contain CSS. Here's a code that I tried.

<table>  
  <tr>
    <td></td>
    <td rowspan=4><img src="/uploads/image12345jpg"></td>
  </tr>  
  <tr>
    <center><td colspan=4>This is the overlay text</td></center>
  </tr>  
</table>
</center>

I'd appreciate your help and answers.

The support says that I have to individually add it in the HTML code... not sure where it goes.

Answer 1

I think you might be looking for something like this: https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/2/

<TABLE border="0" cellpadding="0" cellspacing="0">
  <TR> 
    <TD width="221" height="300" background="https://placeimg.com/640/480/any" valign="bottom">
      <FONT size="+1" COLOR="red">This is the overlay text</FONT>
    </TD>
  </TR>
</TABLE>

EDIT:

This question is asking how to use inline styles, I think:

(I've also put some inline javascript on a click function because you mentioned your scripts wernt working either) https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/28/

<td style="position:relative;">
  <img src="https://placeimg.com/640/480/any" style="position:absolute;z-index:1;" width="600px" height="150px" />
  <div style="z-index:2;position:relative;color:red;font-weight:bold; font-size: 40px; top: 40px; left: 100px;" onClick="(function(){
    alert('See You can click me');
    return false;
});">
    <a href="#" onClick="(function(){ alert('See You can click me'); return false; })();return false;">
    your text goes here click here</a>
  </div>
</td>

Answer 2

This worked for me. Thank you for the help! Appreciate it.

<div class="container" style="position:relative;text-align:center;color:white;" >
  <img class="img-responsive" src="https://placeimg.com/640/480/any" alt="#" style="width:1880px;height:250px;" >
  <div class="centered" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);" >Example Text</div>
</div>