Please test this Outlook 2007/2010 background image solution.

Guru

Ohio

358 Posts

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.

Code:

<!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" background="http://www.thiespublishing.com/oneimage.gif">
                  <!--[if gte mso 9]>
                    <v:image style='width:600px;height:402px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="http://www.thiespublishing.com/oneimage.gif" />
                   <![endif]-->
                <div align="center" style="font-size:18px; color:#ffffff; font-family:Arial, Helvetica, sans-serif;">This is the test</div>
                <div align="center" style="font-size:18px; color:#ffffff; font-family:Arial, Helvetica, sans-serif;">If you can see this over the image<br />background images are successful.</div>
           </td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

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!

Last edited by BThies (3 weeks ago)

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw

BThies

Guru

Ohio

358 Posts
The components:

Replace your <html> tag with:
Code:
<html xmlns:v="urn:schemas-microsoft-com:vml">
Add this style in the head:
Code:
v\:* { behavior: url(#default#VML); display:inline-block; }
Add this code within the <td> you want the background image to display in, and modify according to the size of the image as well as the source:
Code:

Added from later post:
Alternative when using back-up background color
If you are using a back-up background color, use this code instead within the <td>:
Code:
 All of your content that will be floating over the background image. 
You may need to adjust the top and left of the v:shape depending on the content being used in the middle.

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 background="imagelink.gif"> )

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.

Last edited by BThies (3 weeks ago)

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw
NickoLabs

Guru

Saguenay (Chicoutimi)

68 Posts

Hi Brian Thies

It seems to be working on my PC as well. Using Outlook Pro 2007.

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

Posted 2 months ago

Nickolas Simard
Multimedia integrator: Strategy & Web development
Website • Twitter • Facebook • LinkedIn
BThies

Guru

Ohio

358 Posts

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).

Last edited by BThies (2 months ago)

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw
roshodgekiss

Campaign Monitor

Sydney, Australia

178 Posts

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!

Posted 2 months ago

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies

Guru

Ohio

358 Posts

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!

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw
niphal

New member

Sydney, Australia

5 Posts

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

Posted 2 months ago

Andrew Beeston
Brown Box email design & management.
atlasprojects

New member

3 Posts

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!

Posted 2 months ago

for Effective Online Businesses
www.atlasprojects.com.au
http://twitter.com/KerriganEmmy
iamelliot

New member

London UK

3 Posts

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!

Posted 2 months ago

Email Marketing Design Blog - http://www.emaildesignreview.com
Liam McMaster

New member

2 Posts

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!!!

Last edited by Liam McMaster (2 months ago)

Posted 2 months ago
BThies

Guru

Ohio

358 Posts

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. :-)

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw
Liam McMaster

New member

2 Posts

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.

Posted 2 months ago
BThies

Guru

Ohio

358 Posts

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.

Last edited by BThies (2 months ago)

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw

BThies

Guru

Ohio

358 Posts

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>***

Code:

<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.

Last edited by BThies (2 months ago)

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw

Scottmark

New member

1 Posts

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.

Posted 2 months ago
BThies

Guru

Ohio

358 Posts

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.

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw
clussman

New member

6 Posts

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?

Posted 2 months ago
BThies

Guru

Ohio

358 Posts

Hi clussman,

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

Thanks,
Brian

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw
360true

New member

Florida USA

8 Posts

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">



<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>



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

Posted 2 months ago
clussman

New member

6 Posts

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.

Last edited by clussman (2 months ago)

Posted 2 months ago
360true

New member

Florida USA

8 Posts

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!

Posted 2 months ago

clussman

New member

6 Posts

(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.

Code:

<!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>

Posted 2 months ago

Richard@FM

Member

Kent or Essex

58 Posts

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

Posted 2 months ago
BThies

Guru

Ohio

358 Posts

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

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw
BThies

Guru

Ohio

358 Posts

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.

Posted 2 months ago

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype: thiespublishing Twitter: thiesbw

12 3

Forums