Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4437
  • Last Modified:

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?
0
BTMExpert
Asked:
BTMExpert
1 Solution
 
Brian PringleSystems Analyst II, SCM, ERPCommented:
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.
0
 
bluefezteamCommented:
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
0
 
sajay_jCommented:
Try to attach images by adding background="absolute path of image".

So the image would read directly from server.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Ray PaseurCommented:
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

0
 
BTMExpertAuthor Commented:
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?
0
 
bluefezteamCommented:
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
0
 
bluefezteamCommented:
Microsoft have really hooped HTML email marketing with Outlook 2007, everything before that works fine.
0
 
BTMExpertAuthor Commented:
Thanks for your help.  This worked the best, even if it still looks junky in Outlook.  I appreciate it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now