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

html css email outlook-2007

16,287

Solution 1

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

Solution 2

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

16,287

Author by

John B.

Updated on June 15, 2022

Comments

John B. almost 2 years

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.