Non-repeating background on a table cell with content-based height

Hey guys,
What a title...

I'm looking for some help because I'm a little lost on a very specific issue here.
I'm trying to have a non-repeating background image on a <td> element, which height is defined by its content. The issue is, yes, you guessed, Outlook 7+.

Using I managed to get close, but the code output is for repeating-backgrounds only.

I tried to tweak it a little (changing the v:fill type to frame) but the best thing I'm achieving in ie7 is a full-height distorted background.

How could I make this happen ?

Here are some screenshots of what I'm looking for as a result :
(It's a screenshot from Outlook 2002)

Here what I'm currently having in Outlook 2007+ :
(distorted background :( )

And here is my current code :

<td background="" style="background-repeat:no-repeat;" bgcolor="#1A3860" width="650" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:650px; height:342px; max-height:342px;">
        <v:fill type="frame" src="" color="#1A3860" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
        <table width="650" border="0" cellpadding="0" cellspacing="0">
                <td width="650" height="200">dfsfdsdsf</td>
                <td width="650" height="200">dfsfdsdsf</td>
                <td width="650" height="200">dfsfdsdsf</td>
  <!--[if gte mso 9]>

So, if anyone has an idea.. it would be awesome. I'm kind of lost.
Thanks !

davidaf davidaf, 2 years ago

Hey clementoriol,

Well, I tried a bunch of things in the VML as well without much luck. One thing that would work, however, is to make your actual image larger, so that you have the blue field below the stars, like so:

I know this kind of a dirty solution, sorry, but it will work in a pinch if your content isn't going to be too long.

Hopefully someone can pop in with a more elegant solution.

The Campaign Monitor Blog – HTML email smarts to go with your good looks
clementoriol, 2 years ago

Hey davidaf,
thanks for trying ! I'll try your hack, seems better than nothing. The content could be quite long, so I'm crossing my fingers ! It should do for now. Anyway, thanks again ! :)

If anyone as another idea, I'm still looking !


Mr-Mark, 2 years ago

Another dirty solution is to create another <tr> below so the top cell is the size of your background image and the lower cell is whatever size you need just with a background colour on it.

<!--[if gte mso 9]>
    Get a  better email client
JohnP JohnP, 2 years ago

As it is a full email background, you could try the non-VML background method.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free