How make background image on newsletter in outlook?

Question

I'm trying to make newsletter where I have some image as background and text on it. This is easy but I need this to work on Ms Outlook.

What I have tried:

1.

<td width="100" height="100" style="background: url('someurl');">text</td> 

2.

<td width="100" height="100" background="someurl">text</td> 

3.

<td width="100" height="100">     <div style="width: 0px; height:0px; position: relative;">         <div style="width: 100px; height: 100px; position: absolute; background: url('someurl')">            text         </div>     </div> </td> 

But nothing works well on outlook. I have no idea how fix it. I'm using outlook 2007.

Any help would be appreciated.

Answer 1

Powerful tool for "Bulletproof Email Background Images" (VML for Outlook 2007/2010/2013, and HTML/CSS for Outlook 2000/2003, Gmail, Hotmail...)

http://emailbg.net

as an exemple :

    <div style="background-color:#f6f6f6;">   <!--[if gte mso 9]>   <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">     <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>   </v:background>   <![endif]-->   <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">     <tr>       <td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">       </td>     </tr>   </table> </div> 

in order to have the specified background image to Full email body.

This link help to use the Vector Markup Language (VML)

msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx

www.w3.org/TR/NOTE-VML#_Toc416858389

Answer 2

you cannot add a background image to an html newsletter which is to be viewed in outlook. It just wont work, as they ignore the property.

You can only have block colours (background-color) behind text.

Outlook doesn't support the following CSS:

azimuth background-attachment background-image background-position background-repeat border-spacing bottom caption-side clear clip content counter-increment counter-reset cue-before, cue-after, cue cursor display elevation empty-cells float font-size-adjust font-stretch left line-break list-style-image list-style-position marker-offset max-height max-width min-height min-width orphans outline outline-color outline-style outline-width overflow overflow-x overflow-y pause-before, pause-after, pause pitch pitch-range play-during position quotes richness right speak speak-header speak-numeral speak-punctuation speech-rate stress table-layout text-shadow text-transform top unicode-bidi visibility voice-family volume widows word-spacing z-index 

Source: http://msdn.microsoft.com/en-us/library/aa338201.aspx

UPDATE - July 2015

I thought it best to update this list as it gets the odd upvote every now and then - a great link to current email client support is available here: https://www.campaignmonitor.com/css/