Solved

How do you display background images in newsletter emails?

Posted on 2008-06-18
8
4,424 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to debug htl and js pages 8 39
Hide Table in merge 3 33
Asp in server side with Mssql Server 7 4 27
How can I make the first part identical to the second ? 1 26
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 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