Responsive Email: text over image in 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 -->

Where is the text you are having trouble with? Also, your table markup is missing an opening `table`, `tr` and `td` tags. Furthermore, using `table` for layout is considered bad practice, nested tables even more so. — Jon P, Apr 11 '17 at 01:11
Be careful with your code, it seem this last three tags are surplus ``. — Yulio Aleman Jimenez, Apr 11 '17 at 01:12
Yes, table is bad, we afarid about the older email clients. using div and floating the text woould be one alternative? Is it easier to accomplish? — srocksss, Apr 11 '17 at 01:29
Add a `text` right after your image, and then style the span tag so that it align with the image. For the styling, this [stockoverflow answer](http://stackoverflow.com/a/17416110/4902099) may be useful for you. However, as mentioned by others, it will be much easier and cleaner to just use something like `
text here
` to replace the entire tables, unless the tables are need for something else. — hcheung, Apr 11 '17 at 02:55
@JonP I have updated the description to see if it become easier to understand. What do you think? — srocksss, Apr 11 '17 at 13:39
Re the above comments about tables being bad... tables are perfectly acceptable for email design. And will continue to be so whilever email clients like Outlook are still around. Don't be put off using them if you are programming emails. Don't be tempted to use divs unless you want Outlook to ignore them! — Peaceand, Apr 12 '17 at 12:54

score 0 · Answer 1 · answered Apr 13 '17 at 02:02

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">&nbsp;</td>
      <td width="110" style="padding-top:40px;" class="text"> Here some goes text</td>
      <td width="238">&nbsp;</td>
    </tr>
  </tbody>
</table>


<!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->                       

                    </td>
                </tr>
               </table> 
<!-- 4 END MODULE -->

Responsive Email: text over image in HTML table

1 Answers1