CODEWITHSUNDEEP
emailhtml-email
M. Dean
M. Dean

Reputation: 1

How to add an Background Image to an HTML Email?

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?

Upvotes: 0

Views: 157

Answers (2)

Bidstrup
Bidstrup

Reputation: 1617

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

Upvotes: 0

Ted Goas
Ted Goas

Reputation: 7577

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>

Upvotes: 3

Related Questions