A true cross client background image solution????

Hi all,

There is a nice article on The Campaign Monitor blog that shows how to enable background image even in the dreaded Outlook 07 and 2010.

http://bit.ly/9CxzrO

And that's pretty gooood.

There is or so a very good topic in the forum explaining the use of conditional comments to target Outlook 07 and 2010.

http://bit.ly/cAuNSd

As I have always stayed away form background in email I thought this is brilliant, let's try it!!!
I have just coded the new ThinkVitamin and Carsonified html emails and they make use of a light texture in the background.

While working on it and testing various solutions i got frustrated with the fact that to enable a tiled background image in Outlook, you have to apply it to the <body>. But as we all know, Gmail strip the <body> away.
If you apply the background attribute a table element, then Gmail is sorted too.

All good let's go to bed...

That's where i'm not happy, what happen if the image doesn't show up. One of the email is on a black background with light font. Normally I apply a background colour to the body and the table wrapper as to make sure the text will always be displayed with enough contrast.

But with the solution to enable background image in Outlook you can't apply a fall back colour to the table  as it will obfuscate the body element. So i wasn't happy and started thinking it would be better not too support background images in Outlook 07 and 2010, just in case the image would be blocked or missing - better be safe than sorry.

But then I tried to make a little bit more use of the conditional comments. If we can use this technique to support Outlook can we not use it to exclude it too?? It si possible to exclude IE with conditional comments so I decided to check if it is possible to do so with outlook too.

And it seems to work fine, this is what i tried:

<body style=" background styles;">
<!--[if gte mso 9]>
<style type="text.css">
    v\:* {
        behavior: url(#default#VML);
        display:inline-block;
    }
</style>
<v:background fill="t">
           <v:fill type="tile" src="path to image" />
</v:background>
<![endif]-->
<!--[if !mso 9]><!--> 
<div id="gmail-body" style="background-color: #171717; margin: 0; padding: 0;">
<!-- <![endif]-->
Loads of stuff...
<!--[if !mso 9]><!--> 
    </div>
 <!-- <![endif]--> 
</body>

The first bit enables tiling background images in Outlook
the second bit wrap the main table container in a div with a background colour, the comment exclude Outlook from showing it.

Outlook support the <body> and apply the style, Gmail get it's back up background colour and apply the background attribute in the main table.

I have run a test and it seems to work fine

http://handydandies.litmusapp.com/pub/6b7bd65

Anybody would like to join the fun and push the testing to see if it is a sustainable solution?

BThies BThies, 6 years ago

Hi Zapatoche,

If I'm reading it correctly, you want to have a tiled background image with a fallback color, and then the standard wrapper table/nested tables.

You should be able to apply a background color to the body, and use the Campaign Monitor outlined method to apply the tile background.

From there, the inner nested tables would use the z-index fix from my previous forum post which will prevent the table background image from being covered.

Something like this:

<style type="text/css">
<!--
body {
    background-image: url('background.gif');
    background-repeat: repeat-y no-repeat;
    background-color: #464648;
    margin: 0;
    padding: 0;
}
v\:* {
    behavior: url(#default#VML);
    display:inline-block;
}
.ReadMsgBody {
    width:100%
}
.ExternalClass {
    width:100%
}
-->
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" background="background.gif">
  <tr>
    <td align="center"><table width="300" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td height="315" width="300" bgcolor="#000000" valign="top" background="otherbackground.gif">
                    <!--[if gte mso 9]>
                        <v:image style='width:300px;height:315px;position:absolute;top:0;left:0;border:0;z-index:1;' src="http://somelink.com/otherbackground.gif" />
                        <v:shape id="theContent" style='position:absolute; height:315px; width:300px; padding:0; margin:0; top:20px; left:0px; border:0; z-index:10;'>
                        <div>
                     <![endif]-->
                  All kinds of content here.
                  <!--[if gte mso 9]>
                        </div>
                        </v:shape>
                  <![endif]-->
            </td>
        </tr>
      </table></td>
  </tr>
</table>
</body>

Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 6 years ago

Hey BThies,

A message from the master, i'm honored.
I was really impressed by you research I have to say :)

What i need to do is have the background image on the body of the page. It span under all content and need to extend as much as the viewport or the content grows.

So i can't use a fixed sized element to apply your background fix. I don't want either to have to load an oversize background image to cover the expansion of the box if the content grows.
There is already a small image that tile to give the texture to the page.

So i f i understand well the problem, the only way you can do this in outlook 07 and 2010 is by applying the image on the body. then you loose the background on Gmail unless you apply it to the "body-imposter" table.
But as there is no <body> with gmail i can't have a fall back background colour directly on the wrapper table as it will mask the <body> image for outlook.

This is why i used conditional comments to create a background that would be ignored by outlook 07 and 10.
It is all a bit convoluted but then html email is :)

so I wanted to get some feed back and ideas from people like you :)

Maybe playing with the z-index is something to do with the wrapper table but it requires mooooooore testing

CCode, 6 years ago

zapatoche, I think your idea is the best solution you can use these days for your porpose, I like it!

BThies BThies, 6 years ago

Hi Zapatoche,

Far from a master - just another guy in an office.  :-)

I'm probably still reading it wrong (not enough coffee).  Take a look at this image and let me know if this is what you're trying to do.  If not, I'd probably need to see a quick design.

http://www.thiespublishing.com/example/example.jpg


Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 6 years ago

Hey Brian,

this what i have to do,
thanks for taking the tie of your "just an other guy in the office" busy schedule :)

gmail
http://handydandies.litmusapp.com/pub/6b7bd65/results#gmailnew-full_on

outlook
http://handydandies.litmusapp.com/pub/6b7bd65/results#ol2007-full_on

all
http://handydandies.litmusapp.com/pub/6b7bd65
as you can see there is a light texture in the background. and it need to show under the content.
If I could have a plain color background under the content - like in your screen shot - it wouldn't be a problem at all. so i can apply the image only in the background of the email and not in a nested cell. Plus i need to tile the image to retain the flexibility of the layout.

this why i sorted it out with conditional comments to create a new wrapper under the main table (body-imposter, width 100%) which contain the background image for Gmail.
the comment exclude Outlook form displaying this extra wrapper, allow in the background to be visible while it create a fall back colour for Gmail in case the background mage wouldn't show up.

like it happen on the first campaign they sent (fortunately the content was still readable on this one)

Sorry if i'm not clear :(

Cheers for your time :)

BThies BThies, 6 years ago

It doesn't look like a table cell solution is needed - just the standard background solution:

<style type="text/css">
<!--
body {
    background-image: url('background.gif');
    background-repeat: repeat-y no-repeat;
    background-color: #171717;
    margin: 0;
    padding: 0;
}
.ReadMsgBody, .ExternalClass { display:inline; width:100% }
-->
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" background="background.gif">
  <tr>
    <td width="100%">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="100%" align="center" bgcolor="#f4bd14">Your Top Content Here</td>
            </tr>
          </table>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                    <td width="100%" align="center">The rest of your content with nested tables here</td>
                </tr>
        </table>
    </td>
  </tr>
</table>
</body>

Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 6 years ago

Ok correct me if i'm wrong,

From what i have seen and tested so far, Outlook 07 and 2010 do not support background image without fanciness (vml) but in the <body>

If i want the background in Gmail, I need to add the background in the table cell wrapper.

Everything fine till there, but that mean no fall back background colour for Gmail as I can;t specify a colour in the table wrapper as it will appear over the body background in Outlook.

which is why i did this:

<body style=" background styles;">
<!--[if gte mso 9]>
<style type="text.css">
    v\:* {
        behavior: url(#default#VML);
        display:inline-block;
    }
</style>
<v:background fill="t">
           <v:fill type="tile" src="path to image" />
</v:background>
<![endif]-->
<!--[if !mso 9]><!--> 
<div id="gmail-body" style="background-color: #171717; margin: 0; padding: 0;">
<!-- <![endif]-->
Loads of stuff...
<!--[if !mso 9]><!--> 
    </div>
 <!-- <![endif]--> 
</body>

this way i do get a background for gmail but as the extra div doesn't show in outlook i stil have the background visible :)

BThies BThies, 6 years ago

This is the snippet that makes the body background image work in Outlook 2007/2010 and adds the body back-up color for all e-mail clients as well (including gmail).

body {
   background-image: url('background.gif');
   background-repeat: repeat-y no-repeat;
   background-color: #141414;
   margin: 0;
   padding: 0;
}

Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 6 years ago

So am i wrong to think that Gmail strip the body tags out?

BThies BThies, 6 years ago

Gmail strips the header out, which is why the code is moved inline via the interface.

Although you don't see the body tags, Gmail still places a <div> around the inside content and adds those body tags to that div.  It basically replaces the word "body" with "div", and changes your color to an RGB value.

In the example I provided, here's what it looks like in Gmail's interface code:

<div style="background-color: rgb(70, 70, 72); margin: 0pt; padding: 0pt;">
<table width="100%" ..... etc.>all the inside content</table>
</div>

Firebug in Firefox is a great way to inspect the elements and see how it works as well.


Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 6 years ago

Hey Brian,

Thanks for this very good piece of information - you see that you are not just a guy in the office :) -
I had understood that the Body tag and everything applied was going awol in Gmail so it made it difficult for me to get what people were talking about as it wouldn't work when I tried.

I'm doing some test now and it seems to work fine indeed and makes things a little bit simpler.
Plus - sorry Campaign Monitor - I don't use CM and i code my inline style by hand all the time.

So when I see

<style type="text/css">
<!--
body {
    background-image: url('background.gif');
    background-repeat: repeat-y no-repeat;
    background-color: #464648;
    margin: 0;
    padding: 0;
}
-->
</style>

I forgot that people ont the Good CM probably all use the automatic css in-liner :)
So of course it didn't work!!!

Anyway, thanks again for your help :)

BThies BThies, 6 years ago

Ahh!  My fault for assuming you were using CM.  :-)


Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 6 years ago

Should have thought about it myself :)
Silly me !!!

Well I actually did try at some point to put my css inline in the body but I must have done something wrong and then I disregarded it.

Now it works all fine.

:)

zapatoche, 6 years ago

Hello everybody,

I'm back :)

Not sure i'm doing it right there witht his background image thing.
here's a short version of the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css" media="screen">th, td {Text-rendering: optimize-legibility;} #header td {letter-spacing: -1px;} body { width: 100% !important; } a, a:link, a:visited, a:Hover, a:active {color: #52a8c3;}</style>
    </head>
    <body style="background-image: url('http://www.kosmonot.net/dev/carsonifdied/online-conf/body-fowd-dark.gif');background-repeat: repeat-y no-repeat;background-color: #171717;margin: 0;padding: 0;">
   <table border="0" background="http://www.kosmonot.net/dev/carsonifdied/online-conf/body-fowd-dark.gif" cellpadding="0" cellspacing="0"  id="wrapper" width="100%">
            <tr>
                <td align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.4; padding: 5px;" bgcolor="#F4BD14">lorem ipsum
                </td>
            </tr>
            <tr>
                <td align="center" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.4; padding: 5px;" background="http://www.kosmonot.net/dev/carsonifdied/online-conf/body-fowd-dark.gif">
                           <font color="#ffffff">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>

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

it does work in Outlook  and Gmail ( here i have intentionally misspelled the url to see what happen if the background image doesn't load ).

what happen is that AOL (IE and FF) Hotmail (IE and FF) and Lotus Notes 8.5 do not show the background image and fallback background colour so the content is not readable.

Am i missing something (surely pretty obvious)?

CCode, 6 years ago
zapatoche :

Am i missing something (surely pretty obvious)?

You tried to display a background-image which doesn't exist on the given url:
http://www.kosmonot.net/dev/carsonifdied/online-conf/body-fowd-dark.gif [NOT FOUND]

I tried another background-image and it works fine for example in OL 2007, GMail, Hotmail, Lotus 6.5, 8 and 8.5. I also updated your Code and moved the inline-CSS from the <body> to the head-section CSS. That works just fine too:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css" media="screen">
            th, td {Text-rendering: optimize-legibility;} 
            #header td {letter-spacing: -1px;} 
            body { width: 100% !important; 
                   background-color:#171717; 
                   background-image: url('http://www.kosmonot.net/i/parachute.gif'); 
                   background-repeat: repeat-y no-repeat; 
                   background-color: #171717; 
                   margin: 0; 
                   padding: 0;} 
            a, a:link, a:visited, a:Hover, a:active {color: #52a8c3;}</style>
    </head>
    <body>
        <table border="0" background="http://www.kosmonot.net/i/parachute.gif" cellpadding="0" cellspacing="0"  id="wrapper" width="100%">
            <tr>
                <td align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.4; padding: 5px;" bgcolor="#F4BD14">lorem ipsum
                </td>
            </tr>
            <tr>
                <td align="center" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.4; padding: 5px;">
                    <font color="#ffffff">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>

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

PS: I see you already use the simple new Hotmail-Fix body {width: 100% !important; }. A nice one, isn't it? ;-)

zapatoche, 6 years ago

Very nice little trick indeed the body 100%

I'm away for the week end si I will have look at your code when I'm back.
But I  had intentionally given a wrong URL for the image to check if the background colour shows up when the image is missing.
And found out that it doesn't on aol hotmail and lotus notes 8.5

When the path is correct the image shows up I believe but I need  a fall back background colour.

zapatoche, 6 years ago

Hey Christian,
Back from week end by the sea straight intoHTML Email background yumminess :)


I tried your code and it does display the background image (i have to keep the style inlien on the body for Gmail).
Continuing my testing i checked what would happen if the image doesn't load.
As I found out last week, with this technique the fall background-color of the <body> doesn't show up in AOL, HOTMAIL and LOTUS NOTES 8.5.

I checked the email code on Gmail, Hotmail and Aol. They all strip the body tag but Hotmail and Aol don't seem to replace the style applied to the body in  their mail wrapper like GMail.

After more try I have the following result.

-The inline body style works with Gmail.
-Hotmail doesn't apply the inline body style, but apply the <head style>
-Aol doesn't apply any <body style> (inline or head) and the only way i had to get the background color working was by adding again an extra wrapper within conditional comments to exclude outlook 07 and 2010.

here is my latest code

<!--extra div wrapper, style body head and inline-->
<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css" media="screen">
            th, td {Text-rendering: optimize-legibility;} 
            #header td {letter-spacing: -1px;} 
            body { background-color: #171717; background-color:#171717; background-image: url('http://www.kosmonot.net/i/remove/parachute.gif'); background-repeat: repeat-y no-repeat; margin: 0; padding: 0;width: 100% !important;} 
            a, a:link, a:visited, a:Hover, a:active {color: #52a8c3;}</style>
    </head>
    <body style="background-color: #171717; background-color:#171717; background-image: url('http://www.kosmonot.net/i/remove/parachute.gif'); background-repeat: repeat-y no-repeat; margin: 0; padding: 0;width: 100% !important;">
    <!--[if !mso 9]><!--> 
    <div  style="background:#171717; margin: 0; padding: 0;">
    <!-- <![endif]-->
        <table border="0" background="http://www.kosmonot.net/i/remove/parachute.gif" cellpadding="0" cellspacing="0"  id="wrapper" width="100%">
            <tr>
                <td align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.4; padding: 5px;" bgcolor="#F4BD14">lorem ipsum
                </td>
            </tr>
            <tr>
                <td align="center" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.4; padding: 5px;">
                    <font color="#ffffff">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>

                </td>
            </tr>
        </table>
    <!--[if !mso 9]><!--> 
    </div>
     <!-- <![endif]--> 
    </body>
</html>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098