Please test this Outlook 2007/2010 background image solution.

PLEASE USE CODE FROM 2nd POST


The following code utilizes two background images: one repeating for the body, and one full size image for a nested (centered) 600px width table.  Text is placed over the background image in the nested table, and it appears to display correctly in Outlook 2007 & 2010 screenshots.

Old code removed - see 2nd post

Images are linked from my site, so no need to upload a zip file.  Just copy the above entirely and paste into a new html document.

Thanks!

BThies BThies, 4 years ago


=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
THE REQUIRED CODE FOR THE <TD> BACKGROUND IMAGE SOLUTION:
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

(EDIT: All elements now streamlined into the VML objects for better URL importing support and for use in 3rd party mail systems that strip our certain code)

Add this code for the <td> you want the background image to display in, and modify according to the size of the image as well as the source.

<td background="http://www.thiespublishing.com/oneimage.gif" height="402" width="600" bgcolor="#cccccc">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.thiespublishing.com/oneimage.gif"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:407px; width:610px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
<!-- This is where you nest a table with the content that will float over the image -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="402" valign="top">
Insert content here, including additional nested tables.
</td>
</tr>
</table>
<!-- This ends the nested table content -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>

You may need to adjust the top and left of the v:shape depending on the content being used.


Keep in mind this is a table cell based solution - the background you set for all email clients should be in the current <td> housing the code.  (i.e.  <td height="xxx" width="xxx" background="imagelink.gif"> ).  Also make sure the image you're using for the background is exactly sized to the object, and that the width and height are both set for the <td>.

Always be sure to double check the height and width of the v:image and v:shape, as well as the name of the image file being used.


=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
THE CODE FOR A TILED BODY BACKGROUND:
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

This is for the body only, not for a <table> or <td>

<body>
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
           <v:fill type="tile" src="http://www.thiespublishing.com/images/arrow.gif" />
</v:background>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" background="http://www.thiespublishing.com/images/arrow.gif">
        Inner content goes here
    </td>
  </tr>
</table>

Simply replace the src location.

Alternative when using a body background color with a body background image (for Gmail support)

<body bgcolor="#cccccc">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
           <v:fill type="tile" src="http://www.thiespublishing.com/images/arrow.gif" />
</v:background>
<![endif]-->
<!--[if !mso 9]> 
<div style="background-color:#cccccc;">
<![endif]-->

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" background="http://www.thiespublishing.com/images/arrow.gif">
        Inner content goes here
    </td>
  </tr>
</table>

<!--[if !mso 9]> 
</div>
<![endif]-->

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
NickoLabs NickoLabs, 4 years ago

Hi Brian Thies

It seems to be working on my PC as well. Using Outlook Pro 2007.
http://img145.imageshack.us/img145/7135/bgtestol2007.jpg

The test also works in Firefox 3.6.6 Gmail and IE 8 Hotmail.

Should this become a fully tested solution, I sincerely congratulate you! :D


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn
BThies BThies, 4 years ago

Tested and working in the following:

• AOL Mail (Explorer & FireFox)
• AppleMail 3 & AppleMail 4
• Gmail (Explorer & FireFox)
• iPad
• iPhone
• Lotus Notes 8
• Mail.com (Explorer & FireFox)
• Me.com  (Explorer & FireFox)
• Outlook 2002/XP, 2003, 2007, 2010
• Outlook Web Access
• Postbox
• Thunderbird 2.0 & 3.0
• Windows Live Mail
• Windows Mail
• Windows Mobile 6.5
• Yahoo! Mail  (Explorer & FireFox)

Does NOT work in:
• Lotus 6.5 / 7   (These two still support body background images, so a back-up color should still be used).


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 4 years ago

Hi Brian, congratulations on successfully applying background images to table cells! It's certainly one-up on my earlier, more primitive approach of applying a background to an entire table. Some of the folks here may have a little more feedback, but in the interim I'll update my blog post to link back to this thread. Sweet as!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 4 years ago
roshodgekiss wrote:

Hi Brian, congratulations on successfully applying background images to table cells! It's certainly one-up on my earlier, more primitive approach of applying a background to an entire table. Some of the folks here may have a little more feedback, but in the interim I'll update my blog post to link back to this thread. Sweet as!

Thank you!  :-)

I still consider your approach to be very useful, as it's necessary for tiling/repeating a body background (unless someone wants to use one large image - which is not typical).

It'll be interesting to see how this new method plays out in real world scenarios / layouts.

If nothing ends up breaking it, I'd call this one a game changer for all designers/coders!


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
niphal niphal, 4 years ago

Oh sweet! I can't wait to try this out. Great work Brian!


Andrew Beeston
Brown Box email design & management.
atlasprojects atlasprojects, 4 years ago

Awesome! This is legendary effort, Brian. Tried this and sent to Outlook 2007, 2010, Gmail and Hotmail. Displayed exactly the way I wanted to. Cheers!


for Effective Online Businesses
www.atlasprojects.com.au
http://twitter.com/KerriganEmmy
iamelliot iamelliot, 4 years ago

love it! I actually like the way we've evolved to build without background images - in most cases the byproduct is that the email build is more flexible and accessible when images are disabled, but this will definately get us out of a spot in some cases!


HTML Email Design and Build - http://www.elliot-ross.co.uk
Email Marketing Design Blog - http://www.emaildesignreview.com
Liam McMaster, 3 years ago

Hi Brian, done some testing on one of my own templates & I think I've found some limitations with this...

**--PLEASE IGNORE, SEE MY UPDATE BELOW--** Firstly it doesn't seem to work on a nested table; obviously there are ways to avoid this in build but worth pointing out. **--PLEASE IGNORE, SEE MY UPDATE BELOW--**

Secondly, if you set a background colour on the TD or TABLE tags it stops the background image appearing. This is really unfortunate because I would have many uses for being able to place white HTML text over an image in my emails; but unless I set the whole background to a colour using the body tag the text would be invisible until the user downloads the image. Not ideal for those who block images by default. You'll always have to use a text colour that contrasts well with the background colour of your email, so you have the 'images off' situation covered.

Sorry to spoil the party. Congratulations on what you've managed to do, I'm staggered anybody could come up with even a partial solution to this!!!

BThies BThies, 3 years ago

Hi Liam,

I'm noticing some issues as well, and trying to put together a list of what will break it.

I'm not sure if it's a nesting issue though, as it worked in the original which featured the 600px width table nested inside the 100% width table.  Maybe it has to do with how many levels deep?

Also as you had mentioned, setting a background color to the cell will eliminate the background image.

It's always a party till the microsoft police show up.  :-)


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
Liam McMaster, 3 years ago

Apologies - looking back the table I nested within also had a background colour set. So it was the same issue both times! Have edited my post above.

A list of what breaks it would be really useful. Appreciate the work you're doing on this.

BThies BThies, 3 years ago

Update: I managed to get the z-index positioning working in a way that the image will sit above the background color while maintaining the text above the background image.  However, I'm having an issue with formatting that text within a vml object (specifically without using font tags and being able to align the text).

Once I have that figured out it'll solve the primary issue (and hopefully not lead to others...)


Update 2: text formatting done - now trying to get the alignment.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
BThies BThies, 3 years ago

Okay, so I have the background color fix, but it requires using a <p> tag (or <span> tags).  <div>'s will not format or align the text.  ***EDIT July 16th - <div>'s ARE supported - you simply need to enclose the <div>'s within another <div>***

<td width="600" height="402" valign="top" bgcolor="#000000" background="http://www.thiespublishing.com/oneimage.gif">

<!--[if gte mso 9]>
<v:image id="theImage" style='position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.thiespublishing.com/oneimage.gif"/>
<v:shape id="theText" style='position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:2;'>
<![endif]-->

<p align="center" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:18px;">
     This is the test.<br />Text should appear above the image.
</p>

<!--[if gte mso 9]>
</v:shape>
<![endif]--> 

 </td>

Changed the if/endif code to "mso 9" to prevent Lotus 8 from breaking.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
Scottmark, 3 years ago

Hi Bill,

I think you are onto something great here. I tried your original version and had a problem whereby the BODY was also showing the background image in IE8. This was worrying me since it could also be a problem in older versions of IE and perhaps older versions of Outlook which use IE to render the HTML email.

Your newer version seems to have fixed this or at least only shows the background image between the </v:shape> tags.

Two questions:


(1) Does the <html xmlns:v="urn:schemas-microsoft-com:vml"> tag need to be changed to reflect your new <!--[if gte mso 9]> code?

(2) It appears that the background image needs to be hosted elseware and given as a full URL since CampaignMonitor does not find and change the tags in the commented code you are using. Is this true?


Scott.

BThies BThies, 3 years ago

Hi Scott,

The image is shown using the <v:image /> tag, while the text sits within the <v:shape></v:shape> tags a level higher.

The tag <html xmlns:v="urn:schemas-microsoft-com:vml"> is still required when using any form of VML.

Also, as you mentioned the image does need to be hosted elsewhere. (Unless I'm missing a workaround).

Brian.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
clussman, 3 years ago

I'm actually using this to have a background behind the content of the email but I'm running into a weird situation where the VML code is pushing the content down 5px and to the right 10px and zeroing out margins and paddings in the VML code doesn't work. Has anyone run into this? Any ideas how to fix?

BThies BThies, 3 years ago

Hi clussman,

Can you post the code or e-mail it to me?

Thanks,
Brian


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
360true, 3 years ago

Has anyone been successful in having the center table background repeat? I often use a thin horizontal background image that will provide the email with left and right border design and this way it "grows" as the email message gets longer.  Here is my code that doesn't work.... (background image is already hosted) Anyone have a suggestion? Thanks.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background Images?  ORLY?</title>
<style type="text/css">
v\:* {
    behavior: url(#default#VML);
    display:inline-block;
}
body {
    background-image:url('http://www.thiespublishing.com/images/arrow.gif');
    background-repeat: repeat-y no-repeat;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" background="http://www.thiespublishing.com/images/arrow.gif">
  <tr>
    <td align="center"><table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td width="600" height="402" valign="top" bgcolor="#000000" background="http://www.360true.com/test/back-image.jpg">

            <!--[if gte mso 9]>
            <v:image id="theImage" style='position:absolute; height:12px; width:600px;top:0;left:0;border:0;z-index:1; background-repeat:repeat-x no-repeat; ' src="http://www.360true.com/test/back-image.jpg"/>
            <v:shape id="theText" style='position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:2; margin-top:25px;'>
            <![endif]-->

            <p align="center" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:18px;">
             This is the test.<br />Text should appear above the image.
</p>

<!--[if gte mso 9]>
</v:shape>
<![endif]-->

</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

clussman, 3 years ago

360true,

The solution I found was to make the image the height of the email in Outlook 2007 and then specify the height of both VML objects, image and shape, to match.

360true, 3 years ago

Thanks, that indeed is a good solution, but I continue to look for a more "universal" solution. I design templates for clients and am looking to reduce the "hands-on". But this solution is awesome!

clussman, 3 years ago

(Brian, I emailed you but I'm going to post here too. Decided there's no reason not to.)

The problem: weird whitespace bug in Outlook 2007 where content inside the VML tags is pushedt down 5px and to the right 10px. If you remove the VML tags the problem disappears but so does the background image.

Code and screenshot both follow.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    v\:* { behavior: url(#default#VML); display:inline-block; }
</style>
</head>
<body>
<table width="720" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="720" valign="top" bgcolor="#f7e9d0" background="http://image.news.spiceworks.com/lib/fefb1174766701/i/3/9bb9b5ac-9.jpg">
            <!--[if gte mso 9]>
                <v:image id="theImage" style='position:absolute; height:600px; width:720px; top:0; left:0; border:0; z-index:0;' src="http://image.news.spiceworks.com/lib/fefb1174766701/i/3/9bb9b5ac-9.jpg"/>
                <v:shape id="theText" style='position:absolute; height:600px; width:720px; top:0; left:0; border:0; z-index:2;'>
            <![endif]-->
            <a href="http://community.spiceworks.com/group/show/375-spiceworks-5-0-planning"><img src="http://image.news.spiceworks.com/lib/fefb1174766701/i/3/8dfa9267-e.jpg" alt="Spiceworks 5.0 - The Next Frontier of Everything IT!" width="720" height="350" border="0" style="display: block;" /></a>
            <table width="720" border="0" cellpadding="0" cellspacing="0" class="sw_container">
                <tr>
                    <td width="30" style="padding: 0;"><img src="http://image.news.spiceworks.com/lib/fefb1174766701/i/1/a98cf73b-c.gif" width="30" height="1" border="0" alt="" style="display: block;" /></td>
                    <td width="660" style="padding: 0 0 15px; text-align: left; font-family: Helvetica, Arial, sans-serif;">
                        <p style="color:#333; font-size:18px;">This is the test.<br />Text should appear above the image.</p>
        
                        <p style="font-size: 14px; line-height: 21px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <td width="30" style="padding: 0;"><img src="http://image.news.spiceworks.com/lib/fefb1174766701/i/1/a98cf73b-c.gif" width="30" height="1" border="0" alt="" style="display: block;" /></td>
                    </td>
                </tr>
            </table>
            
            <!--[if gte mso 9]>
                </v:shape>
            <![endif]--> 
        </td>
    </tr>
</table>
</body>
</html>

http://studiogreen.net/images/rendering-bug.jpg

Richard.Wendon Richard.Wendon, 3 years ago

Havent tried yet... looking forward to doing so. Congrats on the find... did you find it looking into MS office stationary?

BThies BThies, 3 years ago
clussman wrote:

(Brian, I emailed you but I'm going to post here too. Decided there's no reason not to.)

The problem: weird whitespace bug in Outlook 2007 where content inside the VML tags is pushedt down 5px and to the right 10px. If you remove the VML tags the problem disappears but so does the background image.

Hi Clussman,

I'll reply here as well (emailed you back in case you didn't get it).  There's a closing </td> missing from the 660px width cell, and it looks like it's over on the other side of the next <td>.

Also, <td>'s in the same row must have the same top and bottom padding to display correctly in Outlook 2007/2010.

Brian


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
BThies BThies, 3 years ago
Richard@FM wrote:

Havent tried yet... looking forward to doing so. Congrats on the find... did you find it looking into MS office stationary?

Received an e-mail from a client who was talking about his recent upgrade to Office 2010.  I looked at the background code, then did a search on VML.  Found this site:  http://www.w3.org/TR/NOTE-VML and went from there.  I practically jumped through the roof when it appeared correctly in the first test.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
  1. 1
  2. 2
  3. 3
  4. 9

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

Create an account