Menu
I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the problem?
Here's the HTML for the email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
border: 0px;
outline: 0px;
}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
img {max-width:100%;}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
<tr>
<td>
<table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
<tr>
<td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
</tr>
<tr>
<td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">
<img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
</tr>
<tr>
<td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
</tr>
<tr>
<td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">[email protected]!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
<tr>
<td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
</tr>
<tr>
<td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
910
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
Click File > Options > Mail > Editor Options. Go to the Advanced tab. Enable the checkbox for Show picture placeholders. Click OK.
Supported Background Properties in Outlook.comOutlook.com supports background images in both shorthand and individual properties.
Outlook 2007 and later only supports 2 ways to display a bg image:
In both cases, Outlook scales the image differently than other email readers, and there's no way to prevent the bg image from tiling.
So for all practical purposes, background images aren't an option for supporting a wide range of email readers. Instead, you'll need to make do with foreground images (img tags).
Outlook 2007+, Gmail, Hotmail, and Yahoo Mail don't support CSS positioning. As a result, there's no way to place a text element on top of a foreground image.
When slicing up the email into different areas (typically using HTML tables), each area can either be a text element or a foreground image. But you can't have both in the same area (i.e., you can't have two elements occupying the same space or overlapping).
For areas where there's an image with no text on top of it, that part of the email can be cut as a separate foreground image.
For areas where there's an image with text on top of it, there are 3 options:
In moderation, option #1 is usually safe and reasonable. But when used heavily, it leads to a very high ratio of images to text in the email, which may trigger some spam filters. Before making heavy use of option #1, test the email in a variety of spam filters.
Before proceeding with options #2 or #3, you may need to clear it with the designers (as either one compromises the design in Outlook 2007+). In the bigger picture, background images should be used sparingly when designing emails. It may be helpful to point out to the designers the impact of using background images.
192
Outlook only supports background images in the body tag unless you use VML. Check this out for VML: http://backgrounds.cm/
Here is an example of it working in the body tag.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
