Solved

How do you display background images in newsletter emails?

Posted on 2008-06-18
8
4,422 Views
Last Modified: 2012-05-05
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
Comment
Question by:BTMExpert
8 Comments
 
LVL 16

Expert Comment

by:Brian Pringle
ID: 21817875
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21817902
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
 
LVL 4

Expert Comment

by:sajay_j
ID: 21819378
Try to attach images by adding background="absolute path of image".

So the image would read directly from server.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 109

Expert Comment

by:Ray Paseur
ID: 21821061
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
 

Author Comment

by:BTMExpert
ID: 21822330
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21822681
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
 
LVL 10

Accepted Solution

by:
bluefezteam earned 500 total points
ID: 21822694
Microsoft have really hooped HTML email marketing with Outlook 2007, everything before that works fine.
0
 

Author Closing Comment

by:BTMExpert
ID: 31468586
Thanks for your help.  This worked the best, even if it still looks junky in Outlook.  I appreciate it.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Are there any non javascript based chart/graph solutions? 14 33
Input box gone wrong 8 24
HTML5 Get data in table rows 5 29
HTML5 frame 5 26
Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question