Background image in table cell does not repeat in html newsletter for outlook

1.2k Views Asked by At

I'm working on an HTML-Newsletter which looks great everywhere, but in Outlook.

I've got a table row with three columns, where the left and right column should show a shadow and the center row shows the content. The shadow is a background image with a specified width and a height of 1px. The image should repeat in y direction and should finally have the same height as the center cell. The code for the left cell looks like this (I used the template from http://backgrounds.cm/) :

<td background="shadow-left.jpg" style="width: 32px;" width="32" valign="top">
    <!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:32px;">
            <v:fill type="tile" src="shadow-left.jpg" color="#7bceeb" />
            <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true">
    <![endif]-->
    <div>
        <img src="blank.gif" alt="blank" width="32" height="1" />
    </div>
    <!--[if gte mso 9]>
         </v:textbox>
       </v:rect>
    <![endif]-->  
</td>

Problem:

The background image repeats only ca. 20 times -> 20px although the center cell is much higher than 20px.

Question:

Is it possible to get Outlook to repeat the image for more than 20px? If it's possible, how do I do it?

1

There are 1 best solutions below

1
On

Replace this in your HTML:

<td background="shadow-left.jpg" style="width: 32px;" width="32" valign="top">

By this:

<td style="width: 32px; background: url('shadow-left.jpg') repeat;" width="32" valign="top">

Essentially the new bit of code is inline CSS to set the background image and repeats it in both x and y directions.