Skip to main content

Adding background images to your email in two simple steps



An updated method for adding a background image to an email body or table cells isavailable here.
Gmail
We often get asked about the best way to add a background image to an email newsletter. Well, the good news is that there's a reliable way to get a repeating background image to surround your content in most major email clients, including Gmail and Outlook 2007! In this post, we'll walk through two techniques which can be combined to give your design some background image love.

The table attribute approach

Look, I've written some darn ugly code in my time, but I still get itchy when I use tables. In so much as we shy from them, it should come as no surprise to you folks at home that a fair few table attributes are fairly well supported by the major email clients... And in particular,background.
So, the first thing you can do is to wrap your newsletter content in a table ofwidth="100%", so it spans the width of the reading pane. Then, add the attribute,background="background_image.png" and it should all be roses. Here's how:
<table width="100%" border="0" cellspacing="0" cellpadding="20" background="background_image.png">
  <tr>
    <td>
      <p>Content on a pretty background image.</p>
    </td>
  </tr>
</table>
So far so good. The table will expand downwards as you add more content, so a repeating background image will tile just nicely until the end of your email.
The good news is that this works in most major email clients, including Gmail. Notable exceptions are Outlook 2007 and 2010, plus Lotus Notes 6 and 7.

The CSS approach

Not wanting to keep the ever-demanding Outlook 2007 and its relation, Outlook 2010 away from the action, we turned to a crafty technique for getting background images to work in Outlook 2007. The code looks something like this:
body {
   background-image: url('background_image.png');
   background-repeat: repeat-y no-repeat;
   background-color: #333;
   margin: 0;
   padding: 0;
}
Surprisingly enough for a CSS solution, this does the trick in Outlook 2007 et al. The main difference between this approach and using table attributes is that in some email clients, the background image will extend the entire height of the reading pane, instead of simply the height of the email. However, unless you have a fairly short email (less than the height required for the scrollbar to kick in), you won't be able to tell the difference.
I've also had it pointed out that using the background attribute in the body tag works in a similar fashion. Unfortunately, it doesn't seem to display a background image in Outlook XP. Considering you have to use some CSS anyway (see below), you might as well stick to our CSS approach.
So are you thinking what I'm thinking?

"By your powers combined!"

By using both the table attribute and CSS styles in your HTML email, you pretty much have the entire spectrum of major email clients covered. Don't forget to set margin: 0; padding: 0; in body (as above) - otherwise your table background image won't be flush with the image defined in your CSS styles.
And finally, if you're really finicky, you can define a fallback color for Lotus Notes 6 & 7 by using, <body bgcolor="#333"> (where #333 is the color of your choice). If you've already defined a fallback background-color using CSS, then this will only display in these earlier versions of 'Notes.
Well, Let me know below if you have any questions, or have been using a similar alternative!

Comments

Post a Comment

Popular posts from this blog

10 jQuery Custom Scrollbar Plugins

10 jQuery Custom Scrollbar Plugins If you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design, than make sure you check this list of 10 jQuery custom scrollbar plugins. Hope you find the following information helpful. 1. jScrollPane – custom cross-browser scrollbars Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled. 2. Plugin JQuery : Scrollbar This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin.  The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizible sp
1 comment
Read more

connect ftp with gridview / display files in gridview from ftp or server

HTML Markup Below is the HTML Markup of the page, where I have an ASP.Net control  FileUpload  to upload files, a  Button control to trigger file uploads and an ASP.Net GridView control to display the files from folder. < asp : FileUpload   ID ="FileUpload1"   runat ="server"   /> < asp : Button   ID ="btnUpload"   runat ="server"   Text ="Upload"   OnClick ="UploadFile"   /> < hr   /> < asp : GridView   ID ="GridView1"   runat ="server"   AutoGenerateColumns ="false"   EmptyDataText   =   "No files uploaded">      < Columns >          < asp : BoundField   DataField ="Text"   HeaderText ="File Name"   />          < asp : TemplateField >              < ItemTemplate >                  < asp : LinkButton   ID ="lnkDownload"   Text   =   "Download"   CommandArgument   =   ' &
Post a Comment
Read more

Working with Ajax UpdatePanel in asp.net

During work with our applications if we entered any values in textbox controls and click on a button in form we will see full postback of our page and we will lost all the controls values whatever we entered previously this happend because of postback. If we want to avoid this full postback of page and round trip to server we need to write much code instead of writing much code we can use ajax updatepanel control. Ajax updatepanel will help us to avoid full postback of the page i.e., avoid refresh of the whole page content with postback and stop flickering of the page which is associated with a postback and allows only partial postbacks. By using Ajax updatepanel we can refresh only required part of page instead of refreshing whole page. Ajax updatepanel works on very smooth concepts. but in some cases we got stuck while using Ajax updatepanel. But you need not to worry. Here i am showing you how to resolve the issues for different cases Lets start with very basic use of A
1 comment
Read more