Repeating background-image in Outlook 2007/2010/2013 and Gmail

Question

I have an HTML email with a <td> of dynamic height but fixed width.

How can I add a (vertically) repeating background-image to this cell that works in Outlook 2007, 2010, 2013 and Gmail as well?

The cell doesn't have any content in it, since it is "just" for visual purposes. But it is next to my content cell and thus needs to be dynamic in height.

Answer 1

Update August 2013: I doubt this is still of use to John. B, but I just wanted to give a quick update for anyone who might be having this problem.

I was able to fix the problem I described previously, and stop the background image from peeking out below the solid color background.

Here's the updated code:

<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
            <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
            <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0">
          <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="100"></td>
                        <td bgcolor="#ffffff" width="100">
                        The<br/>
                        background<br/>
                        image<br/>
                        on<br/>
                        the<br/>
                        left<br/>
                        will<br/>
                        stretch<br/>
                        to<br/>
                        the<br/>
                        height<br/>
                        of<br/>
                        this<br/>
                        content.
                        </td>
                    </tr>
                </table>
          <!--[if gte mso 9]>
              <p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
            </v:textbox>
          </v:rect>
          <![endif]-->
        </td>
    </tr>
</table>

The fix here is the line

<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>

right before the end of the textbox, and I've explained this in the Microsoft Office TechCenter thread I referred to in a previous comment.

My original answer:

I've been able to almost crack this, but not quite. So I'm posting this here in hopes that someone can build on it and post a fully working solution.

I'm pretty sure you can't get a background image to actually fill a table cell or other area of undefined height. However, you can use a [VML TextBox][1] and [VML Fill Element][2] around a table, with a background image and fallback color defined, which can stretch to the height of the content.

Inside this textbox, you can then place a two-column table, where one has a transparent background and the other has a solid background color, to emulate the layout you described.

Around the textbox, wrap another table with the same background image and fallback color, for non-Outlook email clients.

Now, this all works well, but the problem I'm having is that the Outlook/Word rendering engine insists on adding a blank line below the table inside the textbox. So while Outlook will repeat the background image along the side of the content, it will also add a row of the background image at the full width of the outer table.

Test the following in Outlook 2007+ to see what I have so far:

<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
  <tr>
    <td>
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
        <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
        <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0"><span style="font-size: 0px;">
        <![endif]-->
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="100"></td>
            <td bgcolor="#ffffff" width="100">
              The<br/>
              background<br/>
              image<br/>
              on<br/>
              the<br/>
              left<br/>
              will<br/>
              stretch<br/>
              to<br/>
              the<br/>
              height<br/>
              of<br/>
              this<br/>
              content.
            </td>
          </tr>
        </table>
      <!--[if gte mso 9]>
        </span></v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  </table>

A few solutions I tried:

• Set the font-size/line-height of the blank line to 0 (I did this in the example code above, but it renders as 1px instead of 0)
• Use a different element instead of a table, to avoid the blank line.
  • <p>: Can't be set to a fixed width.
  • <div>: Can't have a background color.
  • <span>: Can't be rendered as a block level element.

Hopefully someone can share a solution to this remaining issue. John B., if you can post the actual code or layout that you're coding, and also the background image, that will also help determine which hacks might work and which restrictions must be taken into account.

If, for instance, the background image is a 1px high repeating image, you could use a row of 1px wide table cells with different background colors, in place of an actual image.

[1]: http://msdn.microsoft.com/en-us/library/bb264073%28v=VS.85%29.aspx [2]: http://msdn.microsoft.com/en-us/library/bb229596%28v=VS.85%29.aspx

Answer 2

lol, Silly developers. Vertical repeating backgrounds with no content can be easily achieved in most major email clients by simply creating a complex table.

For instance, in John's case he could easily create "td width="1" bgcolor="#XXXXXX" /td" combinations along side his main content "td" Which would hold his content. I highly suggest nesting a table inside your main content td so that you can fluidly control paddings and heights within.

This style of coding is the best way to achieve a vertical liquid layout in email land, I'll go ahead and get you started. The indention's are a bit off, but this is a poor code editing situation and my end table doesn't show up. Either way, you get the idea.

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td width="1" bgcolor="#e4e4e4"></td>
    <td width="1" bgcolor="#e1e1e1"></td>
    <td width="1" bgcolor="#dadada"></td>
    <td width="1" bgcolor="#cfcfcf"></td>
    <td width="1" bgcolor="#c6c6c6"></td>
    <td valign="top" align="center" width="200">
        <!-- Main Content Cell -->
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top" align="center" height="200">
                    <!-- I can be whatever height and still not break this cell's makeshift background -->
                </td>
            </tr>
        </table>
        <!-- End Main Content Cell -->
    </td>
    <td width="1" bgcolor="#c6c6c6"></td>
    <td width="1" bgcolor="#cfcfcf"></td>
    <td width="1" bgcolor="#dadada"></td>
    <td width="1" bgcolor="#e1e1e1"></td>
    <td width="1" bgcolor="#e4e4e4"></td>
</tr>

Also, this is an after thought, but I had used this language for outlook called VML. It works beautifully for backgrounds, however it doesn't do repeating stuff. You can check out a good introduction here: http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Answer 3

It seems that there is no way of achieving repeated background images in Outlook 2007/2010 and 2013.

Here are the previews of JFK's test: http://www.emailonacid.com/app/acidtest/viewresult/nWC9hJ5N0BvkZIk4Zvz724rMQm19MUsCJ0shOIFcWgGMh. Unfortunately it doens't work either.

CampaignMonitor has a very useful guide on HTML and CSS support in different clients: http://www.campaignmonitor.com/css/

If you only need a fixed size background image in Outlook 2007/2010 and 2013, VML objects might help you: https://www.campaignmonitor.com/forums/viewtopic.php?pid=14197

Answer 4

When doing HTML email, you should be aware of the differences among the various clients.

This guide can help. For example, in Outlook 2007/2010, background-repeat is not supported. Oddly, it was supported in version 2003.

Answer 5

I don't use outlook since long time ago, but this seems to do the trick at least in gmail :

<td width="200" style="background-repeat: repeat-y;" background="http://the-location.com/backgroundImage.jpg"></td>

The tip is to use the (deprecated) background attribute to place the image rather than inside the style attribute, where you can set the repeat-y property though (also notice that I am using the attribute width rather than adding it as css property inside the style attribute ... but as you mentioned, only until you build a html email you know what we are talking about ;)

Check this fiddle for a DEMO

I have done this many times in newsletters and I haven't received any report that the mail doesn't look correct when sending tests to outlook users.