Updated: Applying background images to your email newsletters

Adding background images to email? We’ve already done the hard work for you. Check out Stig’s ‘Bulletproof Email Background Images’ code generator at emailbg.net

A few months ago, we covered a couple of methods for applying background images to HTML emails, courtesy of code guru and forum celebrity, Brian Thies. Since then, he’s refined the code required to reliably get background images to display in Outlook ‘07, Gmail and other finicky email clients, so we thought it was high time to publish an update.

Applying a background image to the body of an HTML email

This approach comes in two parts. First, we’re going to use a table of width="100%" to ensure that background images display in clients like Gmail. Then, using Brian Thies’ updated approach, we’re going to apply Microsoft VML to force images to display in Outlook ‘07 & ‘10. Here’s the code in two steps, beginning with the Microsoft-specific HTML namespace declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<
html xmlns:v="urn:schemas-microsoft-com:vml">
<
head

Then there’s the HTML in the body, a sample of which looks like this:

<body style="margin:0; padding:0; width:100% !important;">

<!--
[if gte mso 9]>
<
v:background fill="t">
   <
v:fill type="tile" src="http://www.example.com/background_image.jpg" />
</
v:background>
<!
[endif]-->

<
table width="100%" cellpadding="0" cellspacing="0" border="0">
  <
tr>
    <
td align="center" background="http://www.example.com/background_image.jpg">
    <
table width="600" cellpadding="0" cellspacing="0" border="0">
        <
tr>
          <
td>
             <
p> If you can see this over the imagebackground images are successful. </p>
           </
td>
        </
tr>
      </
table>
    </
td>
  </
tr>
</
table>

</
body

Note that VML images need to be hosted by a 3rd party - you will need to provide a background image (ie. replace ‘http://www.example.com/background_image.jpg’) for this to work. An alternate CSS approach and tips for providing fallback colors are outlined in our earlier blog post.

Applying a background image to a table cell

In an earlier post, we specified a method for setting a background image to cells. While it did the trick, it didn’t allow for background images to be tiled, plus it used a lot of CSS to achieve a seemingly simple result. To overcome this, we swapped out the original VML image class for rect and fill for the same result, with less code.

For a repeating background image in a table cell:

  1. Use the Microsoft HTML namespace declaration featured earlier in this post
  2. Adapt the following VML code sample:
<table width="600" cellpadding="0" cellspacing="0" border="0">
  <
tr>
    <!-- 
Backup background color is #DDDDDD -->
    
<td bgcolor="#DDDDDD" style="background-image: url('http://www.example.com/background_image.jpg');" background="http://www.example.com/background_image.jpg" width="600" height="120" valign="top">
    <!--
[if gte mso 9]>
       <
v:rect style="width:600px;height:120px;" strokecolor="none">
          <
v:fill type="tile" color="#DDDDDD" src="http://www.example.com/background_image.jpg" /></v:fill>
       </
v:rect>
       <
v:shape id="theText" style="position:absolute;width:600px;height:120px;">
       <!
[endif]-->
    <
p>If you can see this over the imagebackground images are successful.</p>
    <!--
[if gte mso 9]>
       </
v:shape>
    <!
[endif]--></td>
  </
tr>
</
table

Note that height and width dimensions in the VML have to be the same as the height and width of the table cell. To prevent the image from repeating, you can either match the background image dimensions to cell width and height, or replace <v:fill type="tile" with <v:fill type="frame" to resize the image to the dimensions defined in <v:rect>.

Many thanks again to Brian for tirelessly sharing his know-how with coders and designers everywhere. If you have questions about either approach or would like suggest improvements, please feel free to read and contribute to this forum thread.

Posted by Ros Hodgekiss

43 Comments

  • Ben 'Wobbles' Payne
    23rd December

    I just tried this and it crashed mine and my colleagues Outlook 2007.  Anyone else getting this issue?  I would love to use background images in emails.

  • Jarrod Taylor
    23rd December

    Hi Ben, did you try to apply the background image to the body of the email, or a single table cell? This is a new issue to me, so I’d love to find out why it’s happening.

  • Ben 'Wobbles' Payne
    23rd December

    It was to a single cell, which had a nested table.  If you want to, I can send you a preview.  I am going to remove the tables from within and see if that help.

  • Ben 'Wobbles' Payne
    23rd December

    Here is the first sentence of the really long error message ... This message can appear if you attempt to embed a drawing object inside another object that was not designed to accept the object.

  • Ros Hodgekiss
    23rd December

    Certainly, I’d love to see a preview - could you kindly email us the code?

    - Ros (otherwise known as Jarrod… I think it’s the new haircut that’s confusing our CMS.)

  • Ros Hodgekiss
    23rd December

    Hi Ben, I just emailed you back - it turns out that the <!—[if gte mso 9]></v:shape><![endif]—> was missing from the code, this causing the design to break. As soon as I added that, background images appeared in Outlook ‘07.

    All the best and thanks for dropping us a line :D

  • Ben 'Wobbles' Payne
    23rd December

    A trap for young players. 

    Thank you a ton for your help on this.  (I better lay off the egg nog!) I have now added that code and it is working perfectly.  Our design time is going to be fifth’d by this!

    Cheers and have an awesome one!

  • Craig
    24th December

    Forcing images to appear in email is how spammers track recipients and one of the ways phishers try to obscure the links they are trying to get us to click on.

    It would be far better to encourage everyone to avoid bloated HTML email altogether and to read email in plain text mode anyhow, avoiding the risks.

  • Sam Giberson
    30th December

    Thanks for this post, it was a life saver today. It is definitely nice to finally have a solid solution for when I need to develop an HTML email with background images.

  • Gabriel Silverman
    31st December

    This is great - thanks for updating this technique!

  • Elinor Gilbert
    6th January

    Thank you for updating us on this!

  • Mike Badgley
    6th January

    Using the examples provided I am unable to get the text to appear on top of the background image within Outlook 2010. When I tested in Outlook 2007 it worked fine. I’m hoping there is some sort of workaround for 2010?

  • Mette
    7th January

    Hey,

    Having the same problem in Outlook 2010

  • Bryan Quilty
    8th January

    I am experiencing an issue not so much with getting the background image to display, but when it does, it shifts the email down exactly 10 pixels. I can send you the code and / or screenshot. If you could find the time to look at it and give me some guidance, that would be tremendously helpful.

    I’ve always noticed that Outlook ‘07 throws in what seem to be their own transparent gifs that throw off thin rows within a table.

  • Ros Hodgekiss
    10th January

    Mike and Mette - Could you kindly visit this forum thread and post your code if you can’t find an answer there? That’s the best way to find out what’s going on.

    Bryan - I was having this issue earlier and had to set negative top and left values in my VML code to get the positioning just right (eg. ...position:absolute; height:130px; width:600px;top:-16px;left:-16px;...). Ugly yes, but give it a shot and let us know how you go.

  • Netsite.gr
    11th January

    I never understand why MSIE have this complicated special filters and no support for the standard code.

  • LauraT
    12th January

    Is there a way for the contained text to not have to be in a tag? Our best practices have shown that if the text is not in a tag, that it will render correctly (size/line height) across 99% of email providers.

  • Jorn
    14th January

    How about the case in which two background images are defined inside the same e-mail? Although I defined two unique id’s, like “theImage1” and “theImage2”, Outlook 2007 just loads the last defined image over the first one.

  • Ros Hodgekiss
    14th January

    Laura - It should be fine without the p tags. As long as the height of the table cell is maintained, then all is well.

    Jorn - Certainly scoot over the forums, this scenario may have been discussed there.

  • James
    19th January

    This is absolutely amazing, thanks so much for posting this!

    I’ve just tested it out and it worked perfectly across Gmail and Outlook 07… but ofcourse, it didn’t work with Lotus Notes.

    Any chance of an update to emcompass this?

  • Ed Doherty
    22nd January

    This is causing the background images to overlap other content in Outlook 2010. Is this because of using the positioning? Is using position:absolute required?

  • Ros Hodgekiss
    24th January

    Hi Ed, it may be a combination of positioning, height/width or z-index - if you post your code in the forums, we’ll be able to find out.

  • Aleks
    24th January

    Great technique!

    Just thought I’d add that in Outlook ‘10 if you have text/images in the cell where the vml code sits it adds some spacing/padding.  For example I had a td cell with a background image as outline above, and inside it was an image button.  The button aligned perfectly in all email clients but in Outlook ‘10 the image had extra spacing around it.  After spending a considerable amount of time trying to pin point where this spacing was coming from I got desperate and removed the vml code to see if that caused it and sure enough it did.  So just be wary of that little tricky situation ;)

    Awesome stuff though, props to Brian.

  • Mary
    2nd February

    The whole of our front-end team is crying tears of joy.

  • Christina Evans
    7th February

    I’m getting the table below it showing up tucked underneath the background image in Outlook 07. Online version is OK though, of course :)

  • Stan
    8th February

    the background=”” html attribute isn’t used in the free templates provided on this site, it seems.  Took me about an hour to figure out that’s why the background images weren’t displaying in Gmail.

  • Art Webb
    17th February

    Has anybody had a problem with this fix rendering coded bullets(•) wrong in Verizon.net?

  • Aaron
    21st February

    I’m having trouble with my text formatting after I use this code. Nothing seems to work.

  • Aaron
    21st February

    I’m having problems with my text formatting after implementing this code. It defaults back to Times New Roman, left-align. Anyone else having this problem?

  • Alex
    10th November

    Is it normal for the cursor to change into a ‘move’ cursor (a cross with 4 arrows) on rollover?
    Anyone know how to override or avoid this?

  • Ros Hodgekiss
    10th November

    Hi Alex, this is certainly very unusual. If you could kindly post your code over in our forums and let us know which email client you’re seeing this in, we’ll certainly take a look and try to work towards a fix :)

  • Jeremy
    15th November

    I’m having a lot of trouble with styling images and anchors within the VML objects. The newsletter looks great in all other clients except Outlook 2007/2010. I have applied the code here and I have all the backgrounds working fine, I can see all content above them also. My issue is when I attempt to style the nested images and anchors within the object.

    Outlook seems to be picking and choosing what inline styling it keeps. I can remove the VML object and Outlook will style the content once again. p tags seem to style OK for the most part. I am having trouble with nearly every other nested element though. Even my nested table that is an actual table seems to lose it’s border styling when in a VML object. Is there something that I am doing wrong? Oh yeah, my code is all HTML and inline styling, no divs or css in the header.

  • Johng
    16th November

    I don’t get how you can work with a table cell that has a definition for height.  Every text change will change the height, and different users will have different setups and preferences that will cause the type to display differently, force the td to break, and screw up the way the background displays.

    ... or am I missing something?

  • Ros Hodgekiss
    16th November

    @Jeremy - Could you kindly post your code and the details above in our ‘Email Design and Coding’ forums? We’ll gladly take a look and see how we can help here. Note that Outlook 07/10 are notoriously tricky clients to work with, so it’s unlikely we’ll get your newsletter to look as great as it does in say, Apple Mail or in the browser.

    @Johng - This isn’t a bulletproof solution by any measure, but it’s the best method we’ve got for reliably displaying background images in Outlook 07/10. There is a very good chance that adding too much text will break your layout, the cell height will collapse etc so I highly recommend testing as much as you can (as with any design). If necessary, add a little spacer image to prevent the cell from collapsing and -webkit-text-size-adjust to minimize text resizing.

  • Jeremy
    16th November

    Thanks for the response Ros, I posted a section of the newsletter over at the forums, under Jeremy Ruth. Thank you very much for the effort and your time!

  • vinay prakash
    2nd December

    Wow!
    I follow the instruction, and the first e-mail really impressed some one….

  • Mark
    17th December

    Hi,

    It seems to work ok but when I add the Microsoft-specific HTML namespace declaration it makes my email go into junk instead of the inbox, it gos into the inbox fine without the declaration but then the background images dont work.

    Has something changed with this recently as I never seemed to have any trouble getting background images to display in Outlook, Im on 2007

    Thanks

  • Ros Hodgekiss
    19th December

    @Mark - That’s really unusual, we haven’t seen this happen on our end. Feel free to post your email code on our forums, as we can potentially test it out and offer suggestions there.

  • Wojtek
    21st December

    Great solution:)

    But is there any way to make it work in Thunderbird as well? Because what I get applying this solution in Thunderbird is an additional empty block (supposedly the one that get filled in case of outlook).

  • Wojtek
    21st December

    Me again, my bad;) In fact it works in Thunderbird as well:)

  • Free image editor
    27th December

    So it works in Thunderbird. That’s great news. It means the problem is me doing something wrong.

  • GavBridger
    24th January

    With the <td> version, Is it possible to align the content of the cell centrally, both horizontally and vertically? I have align=“center” valign=“middle”, and vertical-align:middle; text-align:center; appended to the end of the style declaration of the <td>, and vertical-align:middle;text-align:center; appended to the style attribute of both the <v:rect> and <v:shape>.

  • Jim Nichols
    7th February

    Quick question…..this looks to be a great help, but I’m having what I hope to be a simple issue.  I am wanting to use background images displayed in cells within Outlook but I don’t need text to be displayed in-front of them. I have altered the code to look something like this….

    <table width=“600” cellpadding=“0” cellspacing=“0” border=“0”>
      <tr>
      <!—Backup background color is #DDDDDD—>
      <td bgcolor=”#DDDDDD”  url(‘http://www.example.com/background_image.jpg’);” background=“http://www.example.com/background_image.jpg” width=“600” valign=“top”>
      <!—[if gte mso 9]>
        <v rect strokecolor=“none”>
          <v:fill type=“tile” src=“http://www.example.com/background_image.jpg” ></v:fill>
        </v:rect>
        <v shape id=“theText” >
        </v:shape>
      <![endif]—></td>
      </tr>
    </table> 

    Basically removed the tag and contents as well as all height specs…..do I have to enter the height to make this work? I am wanting the image to repeat in the Y but not the X direction so I have labeled the width but left height open ended.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account