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 backgrounds.cm 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="http://clementoriol.com/grdfmail/mail03/images/fond.png" 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="http://clementoriol.com/grdfmail/mail03/images/fond.png" color="#1A3860" /> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> <![endif]--> <div> <table width="650" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="650" height="200">dfsfdsdsf</td> </tr> <tr> <td width="650" height="200">dfsfdsdsf</td> </tr> <tr> <td width="650" height="200">dfsfdsdsf</td> </tr> </tbody> </table> </div> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td>
So, if anyone has an idea.. it would be awesome. I'm kind of lost.
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: https://dl.dropboxusercontent.com/u/1589284/support_public/fond.png
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.
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 !
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.
As it is a full email background, you could try the non-VML background method.