0

I want to add a background image to a table...

<table background="https://host.tld/image.png">
<tr><td>blablabal</td></tr>
</table>

doesn't work... any ideas?

M. Dean
  • 1
  • Possible duplicate of [How make background image on newsletter in outlook?](https://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook) – Vijay Rathore Dec 07 '17 at 11:21

2 Answers2

2

To cover almost every client, including the Windows Outlook's, the background image needs to be defined once in HTML/CSS and again in VML for versions of Outlook that use Microsoft Word to render emails.

Here's a modified version of Backgrounds.cm that I use for this:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
    <tr>
        <td background="http://placehold.it/680x180/222222/666666" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 680px; height: 180px;" src="http://placehold.it/680x180/222222/666666" />
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 680px; height: 180px;">
            <v:fill opacity="0%" color="#222222" />
            <![endif]-->
            <div>
                <!--[if mso]>
                <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="500">
                <tr>
                <td align="center" valign="top" width="500">
                <![endif]-->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:500px; margin: auto;">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 40px 20px; font-family: sans-serif; font-size: 15px; line-height: 140%; color: #ffffff;">
                            blah blah blah
                        </td>
                    </tr>
                </table>
                <!--[if mso]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </div>
            <!--[if gte mso 9]>
            </v:fill>
            </v:rect>
            </v:image>
            <![endif]-->
        </td>
    </tr>
</table>
Ted Goas
  • 7,051
  • 1
  • 35
  • 42
  • Maybe you're missing the `` tag? I've updated my answer. Do you at least see the background color, is it just the image that's missing?
     – Ted Goas Dec 07 '17 at 13:18
0

You can use this online service https://backgrounds.cm/, it doing a great job, aswell on Outlook 2007,2010,2013

Bidstrup
  • 1,597
  • 2
  • 16
  • 32