Responsive Email: text over image in HTML table - html-table

Question

Table with one-sliced image as body:
How can I acomplish this? I want insert text within the two circle. The 3 circle image is only one image.
My table is already responsive, If I put this image with the text as part of the image it already get resized, however the words are unreadable. As I am working with dynamic content in marketing cloud, I need this to be text.
Suggestions?
table.moduleSection td.bg img {
height: auto;
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
table.moduleSection td.bg p {
width:100%;
height: 100%;
}
<!-- 4 START MODULE -->
<table class="moduleSection" width="640">
<tr>
<td valign="top" height="100%" class="bg" align="center" bgcolor="#ffffff" width="100%" style="font-family: Arial, sans-serif; font-size: 14px; color:#233251;line-height: 20px; margin: 0;">
<img src="http://single-image-here" alt="">
<p>Here some goes text</p>
</td>
</tr>
</table>
<!-- 4 END MODULE -->

Answer 1

From the code snippet you have posted it seems your template is purely responsive. You can use the [backgrounds.cm] (https://backgrounds.cm/) tool to place a background for outlook (and add in for other email clients) and add in tables above that to place your text over image. Once you reach a break point in screensize then you can switch the image and change the width/height of the cell that contains the copy.
I have given an example below as to how you can do it.
table.moduleSection td.bg img {
height: auto;
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
table.moduleSection td.bg p {
width:100%;
height: 100%;
}
#media only screen and (max-width : 480px) {
.moduleSection{width:100%;}
.moduleSection .bg{ background-size:300px auto !important;height:200px !important;}
.moduleSection .bg .text{padding-top:60px!important;}
}
<!-- 4 START MODULE -->
<table class="moduleSection" width="640">
<tr>
<td valign="top" height="100%" class="bg" align="center" bgcolor="#ffffff" width="100%" style="font-family: Arial, sans-serif; font-size: 14px; color:#233251;line-height: 20px; margin: 0;height:100px; background-image:url('https://thumbs.dreamstime.com/z/put-your-text-here-2493239.jpg'); background-size:30% auto;background-repeat: no-repeat; background-position:center center;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:650px;height:134px;">
<v:fill type="frame" src="https://thumbs.dreamstime.com/z/put-your-text-here-2493239.jpg" color="#e9e9e9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="284"> </td>
<td width="110" style="padding-top:40px;" class="text"> Here some goes text</td>
<td width="238"> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!-- 4 END MODULE -->