{"id":170,"date":"2014-01-28T08:36:56","date_gmt":"2014-01-28T08:36:56","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=170"},"modified":"2014-12-17T20:19:07","modified_gmt":"2014-12-17T20:19:07","slug":"outlook-com-and-background-images","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/outlook-com-and-background-images\/","title":{"rendered":"Outlook.com and Background Images"},"content":{"rendered":"

(If you’re using conditional comments, read this article<\/a> on how Outlook.com is handling them differently)<\/p>\n

A well placed background image can make all the difference in an email. If you have an image that you’d like to use as the background, use a table cell background to get it to work in Outlook.com (Hotmail).This is effective because Outlook.com strips background-image styles.<\/p>\n

For example Outlook.com will strip the background-image from this div element.<\/p>\n

<div style=\"width:300px; height:200px; \r\n    background-image:url(http:\/\/server\/image);\">\r\n  Content\r\n<\/div><\/pre>\n
However if the background is set using the background attribute, Outlook.com will leave it as is, for example:<\/p>\n
<table border=0 cellpadding=0 cellspacing=0><tr>\r\n  <td width=\"300\" height=\"200\" background=\"http:\/\/server\/image\">\r\n  Content\r\n  <\/td>\r\n<\/tr><\/table><\/pre>\n
Client Support<\/b><\/p>\n
Most clients support both table cell background and the background-image style. However table cell background has the added support of Outlook.com and Lotus Notes 8.5. These clients support table cell background, Yahoo! Mail, Outlook.com, Gmail, Outlook 2003, Lotus Notes 8.5, iOS Mail, Android Mail.<\/p>\n
Background Images on Outlook 2007+<\/b><\/p>\n
As an aside, Outlook 2007\/2010\/2013 do not support either table background images or background-image styles but Campaign Monitor created a Bulletproof background images tool that allows for background images in those clients by using some clever techniques. You can check it out at backgrounds.cm<\/a>.<\/p>\n
Recap<\/b><\/p>\n
Our first Interactive Email example<\/a> allowed the user how to toggle between a foreground image and a background image set on a table cell using the background attribute.\u00a0 As demonstrated above,\u00a0it would be easier to implement using one element and toggling over the background-image style. However, doing so would mean the effect would not work on Outlook.com although it would still work on Yahoo! Mail and Outlook 2003.<\/p>\n



\n
\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n
<\/p>\n