Repeating a background image within a table cell

I have spent the last several hours trying to figure out how to get this to work.  I believe I have done everything correctly (according to this post) to place a background image within a cell so that it displays properly in Outlook 2007/2010.  Try as I might, it's not working.  Can't get it to work at all, let alone with the repeat-y that I want.

I'm pasting below my code (not a full template obviously, just enough to test this to see if it's even possible.)  Any help would be appreciated!!!

<html xmlns:v="urn:schemas-microsoft-com:vml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table width="0" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td style="background-image: url('http://gonggongcommunications.com/clients/worley/images/paper-background.gif'); background-repeat: repeat-y no-repeat;background-position: top center;" background="http://gonggongcommunications.com/clients/worley/images/paper-background.gif" bgcolor="#2164a1" width="600">
          
          <!--[if gte mso 9]>
          <v:image id="theImage"  src="http://gonggongcommunications.com/clients/worley/images/paper-background.gif" style="position:absolute;width:600px;top:-16px;left:-16px;border-width:0;z-index:1;background-repeat: repeat-y no-repeat;background-position: top center;" />
          <v:shape id="theText" style="position:absolute;width:600px;top:-9px;left:-16px;border-width:0;z-index:2;" >
          <![endif]-->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce   condimentum vehicula lorem, eu mollis diam hendrerit id. Donec mattis,   ante et sollicitudin malesuada, magna eros aliquet nisi, et placerat   diam felis at nisl. Vestibulum sed velit eu neque congue consequat.</p>
            <p> Phasellus auctor lorem in quam aliquet sit amet porttitor metus iaculis.   Aliquam in erat eu urna aliquet viverra vitae a nunc.</p>
            <!--[if gte mso 9]>
            </v:shape>
            <![endif]-->
 </td>    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Hi alsage13, welcome to the forums! There were a couple of things missing from the code above, which were resulting in the background image not displaying. For example, no height had been declared on the VML code, nor had xmlns:v="urn:schemas-microsoft-com:vml".

It isn't possible to get the background image to repeat with this workaround - you will have to create a single image to fill the entire cell.

With the above in mind, I've fixed up the code and tested it out, so it's now looking like this in Outlook 2010:
https://img.skitch.com/20111101-d2tjsiuk1d7p6iqs9s9citr28u.jpg

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<style type="text/css">
    td p { font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
</style>
<table width="0" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td style="background-image: url('http://gonggongcommunications.com/clients/worley/images/paper-background.gif'); background-repeat: repeat-y no-repeat;background-position: top center;" background="http://gonggongcommunications.com/clients/worley/images/paper-background.gif" width="600" height="120"><!--[if gte mso 9]>
          <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" src="http://gonggongcommunications.com/clients/worley/images/paper-background.gif" style="position:absolute;width:600px; height:120px;top:-16px;left:-16px;border-width:0;z-index:1;background-position: top center;" />
          <v:shape id="theText" style="position:absolute;width:600px;height:120px;top:-9px;left:-16px;border-width:0;z-index:2;" >
          <![endif]-->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce   condimentum vehicula lorem, eu mollis diam hendrerit id. Donec mattis,   ante et sollicitudin malesuada, magna eros aliquet nisi, et placerat   diam felis at nisl. Vestibulum sed velit eu neque congue consequat.</p>
      <p> Phasellus auctor lorem in quam aliquet sit amet porttitor metus iaculis.   Aliquam in erat eu urna aliquet viverra vitae a nunc.</p>
      <!--[if gte mso 9]>
            </v:shape>
            <![endif]--></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<unsubscribe>unsub</unsubscribe>
</body>
</html>

Hope this sets you on the right track here - let us know if you come across any other oddities, apart from the non-repeating background :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
alsage13, 5 years ago

Hi Ros,

Thank you for help, I really appreciate it.  It confirms fears, which was that the repeating background image wouldn't work.  I could work around it, but my non-tech client won't be able to.  Sigh.  It was a really awesome legal pad design for a law firm.  Oh well.

I really appreciate your help though - this is why CM rocks!!!

Amanda

roshodgekiss roshodgekiss, 5 years ago

Thanks, Amanda! Glad I could help somewhat here - unfortunately there aren't really bulletproof solutions for things like background images. I'm always happy to add my 2 cents, so drop by anytime :D


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

Hi Amanda, I'm so sorry if this comes too late, but I've finally cracked how to have a repeating background image in Outlook 2007 and Outlook 2010. Based on the same code as above, here's what it looks like:

https://img.skitch.com/20111107-fyq2nq784s3fgjqq3p88gq7dt4.png

Here's the code I used:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<style type="text/css">
    td p { font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
</style>
<table width="0" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td style="background-image: url('http://i4.createsend1.com/ei/y/E4/5E8/2CC/213846/images/cm-logo-double.gif'); background-repeat: repeat-y no-repeat;background-position: top center;" background="http://i4.createsend1.com/ei/y/E4/5E8/2CC/213846/images/cm-logo-double.gif" width="600" height="120">
    <!--[if gte mso 9]>
       <v:rect style="width:600px;height:120px;" strokecolor="none">
          <v:fill type="tile" src="http://i4.createsend1.com/ei/y/E4/5E8/2CC/213846/images/cm-logo-double.gif" /></v:fill>
       </v:rect>
       <v:shape id="theText" style="position:absolute;width:600px;height:120px;border-width:0;" >
    <![endif]-->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce   condimentum vehicula lorem, eu mollis diam hendrerit id. Donec mattis,   ante et sollicitudin malesuada, magna eros aliquet nisi, et placerat   diam felis at nisl. Vestibulum sed velit eu neque congue consequat.</p>
      <p> Phasellus auctor lorem in quam aliquet sit amet porttitor metus iaculis.   Aliquam in erat eu urna aliquet viverra vitae a nunc.</p>
      <!--[if gte mso 9]>
            </v:shape>
            <![endif]--></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<unsubscribe>unsub</unsubscribe>
</body>
</html>

Note the fundamental difference is that I've used <v:rect ... and <v:fill type="tile" ... to achieve the repeating background, which uses considerably less code than using <v:image.

Thanks Amanda! Hopefully you can use this in future campaigns.


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

Note that I've made a few more tweaks and updated our background images blog post. You can view the updated method here.


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

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