Solved

How do you display background images in newsletter emails?

Posted on 2008-06-18
8
4,428 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
LVL 110

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

617 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