No repeating image in a table data (td)

Question

Is it possible to stop repeating background image in a table data (TD) without CSS ?

For example

<table>
  <tr>
     <td background="http://foobar.com/image.jpg">Some text</td>
  </tr>
</table>

I'm looking for a HTML solution, because I'm developing HTML template which will be used for a mail newsletter.

Answer 1

You can append the css to your tag straight in your html code:

<td style="background-image:url(smile.gif); background-repeat:repeat;">

I think there is no way to do that just using html!

Answer 2

Simple answer: No.

Fortunately, most emails you can use inline css styling. As such, I'd try the following and see if it accomplishes what you're looking for.

<td style="background:url(http://foobar.com/image.jpg) no-repeat;">Some text</td>

In the event that fails (as I've seen it do so before), you're only other option is place the image in an <img> tag and manipulate it so it falls underneath the text.

See here for supported CSS attributes: http://www.campaignmonitor.com/css/

Hope this helps.

Answer 3

For maximum compatibility, you should use both inline CSS and the HTML background attribute, as some clients ignore one but not the other.

<td style="background-image:url('http://www.example.com/smile.gif'); background-repeat:no-repeat;" background="http://www.example.com/smile.gif">Some text</td>

Some points to note:

1. You must use a absolute URL for the image src
2. The quotes around the the URL in the background-image inline style should be there (the opposite of the normal CSS recommendation, but some clients have issues if the single quotes aren't included.)
3. Don't use CSS shorthand, again some clients ignore it although they will parse the longhand. Also, some will set a background color of #000000 if you don't set a background-color in the shorthand version.
4. Background images don't work at all in Outlook 2007, unless you use some rather nifty Microsoft proprietary code. Unfortunately, that code doesn't allow you to stop it repeating.

The best way to stop it repeating is simply to make the image much bigger than it needs to be, so that it never needs to repeat.