Link to home
Start Free TrialLog in
Avatar of BTMExpert
BTMExpert

asked on

How do you display background images in newsletter emails?

I am trying to create an email newsletter, and I have a background image I would like to repeat with the width of the table.  It is not showing up at all in Outlook and G-mail.  What can you do to make background images show up?
Avatar of Brian Pringle
Brian Pringle
Flag of United States of America image

Most email clients will not allow embedded CSS.  Most of them only allow basic HTML content.  There are some newer ones that will allow it, but it is always advisable to code for the greater population.  With that said, stay away from CSS in email, for now.
Avatar of bluefezteam
bluefezteam

you have to go old school - set the bg property of the table to image.

http://mailchimp.blogs.com/blog/2006/01/background_imag.html
Try to attach images by adding background="absolute path of image".

So the image would read directly from server.
BTMExpert: I've attached a code snippet that works well with all current email readers.  You will see that some CSS is used, as well as some embedded attributes in the tags.  This was determined through an exhaustive testing process.  A combination of old school and new school, if you will.

Going forward, you might want to look into a company called "Constant Contact" -- they provide email newsletter distribution services at very modest cost (much less than the cost of doing it yourself, for sure!) and if they had been around when we originated our email newsletter I would have used them instead of grinding out the answer for ourselves.  Today I advise my clients to go with CC and they get excellent results.  Complete user control over the subscriptions.  Never a false positive for spam, never a blocked message... You get the picture.

Best of luck, ~Ray
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--
This is a message from XXX, L.L.C.
If you cannot see the text and graphics, please contact
##__CONTACT_## at ##__CONTACTPHONE_##.  Thanks!
This message is formatted in HTML.  The message template is here:
##__TEMPLATE_##
<!-- -->
  <title>##__TITLE_##</title>
  <style type="text/css">
BODY, TABLE, TR, TBODY, TD, P { font-family:verdana, sans-serif; font-size:13px; }
H3 { font-size:15px; }
IMG { display:inline; border:#003366 0px solid; border-bottom:0px; }
A:hover { color:firebrick; }
A { color:navy; }
A.IMG { text-decoration:none; border:0px; }
.ABOVE { border:#003366 1px solid; border-bottom:0px; }
.BELOW { margin:0px; text-align:left;
	border:#003366 1px solid; border-top:#003366 0px; border-bottom:#003366 0px;
	padding:15px; padding-bottom:0px; width:590px; }
.FOOTER { margin:0px; text-align:left;
	border:#003366 1px solid; border-top:#003366 0px;
	padding:15px; padding-top:0px; padding-bottom:0px; width:590px; }
.DISCLOSURE { font-family:verdana, sans-serif; font-size:9px; padding:4px; padding-left:0px; padding-right:0px; }
.SIDECAR { margin:10px; margin-right:10px; margin-top:0px; border:#003366 1px solid; padding:5px; width:200px; }
  </style>
</head>
<body>
<a name="top"></a>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="590" background="http://www.XXX.com/email_system/images/greybar.gif">
  <tbody>
    <tr valign="top">
      <td class="ABOVE" align="left"><a href="http://www.XXX.com"><img style="border: 2px solid ; width: 620px; height: 60px;" alt="XXX, L.L.C. Investment Management" src="http://www.XXX.com/email_system/images/banner.gif" align="middle" hspace="0" vspace="0"></a>
      </td>
    </tr>
    <tr>
      <td class="BELOW">
      <table border="0" cellpadding="0" cellspacing="0" width="99%">
        <tbody>
          <tr>
            <td align="left">
            <h3>Preliminary Monthly Performance:</h3>
            </td>
 
[HTML SNIPPED OUT]
 
      </td>
    </tr>
  </tbody>
</table>
</center>
</div>
</body>
</html>

Open in new window

Avatar of BTMExpert

ASKER

Main problem now is in Outlook.  I followed the instructions posted by bluefezteam, and it looks good in gmail.  In Outlook,  the area with the content is totally ignoring the widths that are defined in the table and no background image appears.  Any ideas?
Microsoft Outlook 2007 doesn't load background images anymore, there's no way around it - I end up rendering text onto an image and leaving it in a table cell so it's not a bg image but an inline image...

There's also an issue with Outlook 2007, when Images come in it converts them from 72dpi (original size) to 120dpi and therefore they become distorted...

The only way I've found to prevent this is by sending the HTML from outlook originally.

Have you hardcoded the widths in the table in an old school method? if you are going to use CSS for formatting they have to be added inline and not via external css.

<td style="width:100px"></td>

background image may
ASKER CERTIFIED SOLUTION
Avatar of bluefezteam
bluefezteam

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for your help.  This worked the best, even if it still looks junky in Outlook.  I appreciate it.