2

I'm developing an email and would like an image to show up only on a mobile device.... So I created an empty <td> with a span inside, and styled the span to have a background image.

The problem is, I'd like the image to take up a whole row, instead of being right next to the headline. I tried clear:both and display:block but I'm not sure why it's not working. I also tried setting the width to 100% but that just throws everything off... any suggestions?

http://jsfiddle.net/pEDSn/

.test {
    width: 41px;
    height: 41px;
    background-image: url('http://placehold.it/41x41');
    background-repeat: no-repeat;
    background-size: 41px 41px;
    display: block;
    clear: both !important;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Mike
  • 2,633
  • 6
  • 31
  • 41

3 Answers3

1

because of the arrangement of 3 in your single row, the table layout is enforced over the and css.

I would suggest moving your h1 into a separate row.

<tr>
    <td> <!-- first td you are using as a spacer --> </td>
    <td> <span><!-- this is where your image is --></span> </td>
    <td> <!-- last column is here --> </td>
</tr>
<tr>
    <td colspan="3"><h1><!-- place your heading text here --></h1></td>
</tr>
seth yount
  • 132
  • 6
0

I added an empty row with the class "test" and it worked... check it out:

<table id="headline_body_copy_top" width="532" border="0" cellspacing="0" cellpadding="0">


  <td align="left" valign="top">
    <h1 style="padding:0; margin:0;"><font size="5"><span class="headline_text">Ficaborio vellandebis arum inus es ema gimus, quibus vent.</span></font></h1>
  </td>
</tr>
<tr>
  <td height="25" class="marginResize">
    <!-- spacer -->
  </td>
</tr>

http://jsfiddle.net/pEDSn/2/

Mike
  • 2,633
  • 6
  • 31
  • 41
0

Using a background-image in this technique is not supported across major email clients. You should inline the tag for all the clients that do not support css in the style tag. Also, background-image does not work in Outlook, unless it is in the <body> tag.

If you want it to show the image only on mobile, you'd be better off using a normal image tag and hiding it with display:none;, then in a media query, overriding to display:block;. This would still not work for the inline-only clients like Gmail, but it is the better way to do it.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • I didn't make this clear in the post, but this image is only supposed to show up on mobile email clients on Android and iOS. Luckily, they allow for CSS3 and are more leinent towards using things like background-image – Mike Sep 19 '13 at 17:37