Solved

How do you display background images in newsletter emails?

Posted on 2008-06-18
8
4,418 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
Comment Utility
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
Comment Utility
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
Comment Utility
Try to attach images by adding background="absolute path of image".

So the image would read directly from server.
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:BTMExpert
Comment Utility
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
Comment Utility
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
Comment Utility
Microsoft have really hooped HTML email marketing with Outlook 2007, everything before that works fine.
0
 

Author Closing Comment

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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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 …

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now