StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML E-mail - Using a background image
text
Body
copied!<p>I have created my HTML e-mail using tables, and the table has a background image which comes through fine in most web based e-mail clients.</p> <p>I am struggling to get the background image to show in Outlook.</p> <p>My latest attempt, I have tried doing the following:</p> <pre><code><img style='position: absolute; z-index: 1; height:1157px; width:712px;top:0;left:0;border:0;z-index:1;' src="http://www.site.com/background.jpg" /> <table cellpadding="0" cellspacing="0" border="0" style="padding:0;line-height: 100% !important;font-family: Verdana,Times New Roman,Times,serif; font-size: 12px; position: relative; z-index: 2;" width="712" height="1153"> ... </table> </code></pre> <p>This image comes through in outlook, although the table is below the image.</p> <p>I am guessing this is because Microsoft Word doesn't support "position" or "z-index".</p> <p>I am looking for a push in the right direction to create this HTML e-mail, I don't mind redoing it from scratch. I just need to get this background image working in all web based and desktop e-mail clients.</p> <p>I've already had a scan through <a href="http://www.campaignmonitor.com/css/" rel="nofollow">http://www.campaignmonitor.com/css/</a>, I'm guessing my best bet would be to completely slice every image and position them in tables?</p> <p>If someone could give me a very basic guidance on how to do background images which work globally across all mail clients, I'd really appreciate it.</p> <p>Thank you.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload