How to Use Image as a Table Background in Email

How to place background images on HTML emails with dynamic height from table row?

Turns out I recently wrote about background properties in VML. Here are the equivalents in VML for the <v:fill> element of the CSS properties you mentioned:

type="frame" is equivalent to background-repeat: no-repeat;
origin="0,0" position="0,0" is equivalent to background-position: center; (it is also the default values for <v:fill> so we can simply omit this)
aspect="atleast" is equivalent to background-size: cover;

Also a few notes on the code you posted:

The end of your <v:fill> element has an extra quote and semicolon (<v:fill type="frame" src="img.jpg"/>';)
In VML, the </v:textbox> and </v:rect> must be closed after the content you want over your background.
Applying the CSS background to a <tr> feels a bit sketchy to me. Although this might just be a personal preference, I would rather use a <div> here.
The HTML background is really not necessary nowadays. The CSS background property is pretty well supported now.

Here’s a full example of code I rewrote:

<!DOCTYPE html>
<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px; margin:0 auto;">
        <tr>
            <td>
                <div style="background:0 0/cover; background-image:url(https://i.imgur.com/d4mw7CC.jpg); background-size:cover; background-repeat:no-repeat; background-position:center;">
                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                        <tr>
                            <td>
                                <!--[if mso]>
                                <v:rect filled="true" stroked="false" style="width:600px;">
                                    <v:fill aspect="atleast" type="frame" src="https://i.imgur.com/d4mw7CC.jpg" />
                                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                <![endif]-->
                                <p style="text-align: center;">Heading</p>
                                <!--[if mso]>
                                    </v:textbox>
                                </v:rect>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>
                </div>
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                    <tr>
                        <td width="50%" height="100px"><p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, <a href="#">justo</a>. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p></td>
                        <td width="50%" height="100px"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

And here you can see tests screenshots on Email on Acid.

Outlook Windows Background Image Space Email Template

Worked for me on my Outlook (Windows, 365) when I changed from px to pt. You also have to multiply by 0.75 of course. So it becomes:

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:450pt; height:247pt; border: 0; display: inline-block;">

Edit:
You also need to collapse the borders, which can be just done template-wide via the head. The default is separate table cells, which puts in a small gap between them.

<head>
<!--[if mso]>
  <style type="text/css">
  table {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }
  </style>
  <![endif]-->
</head>

HTML Email Template not showing background image in Outlook 365 anymore

The background property (only when there is a URL) is not supported in Outlook. The fact is that Outlook uses Word for rendering message bodies. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

How to Use Image as a Table Background in Email

How to place background images on HTML emails with dynamic height from table row?

Outlook Windows Background Image Space Email Template

HTML Email Template not showing background image in Outlook 365 anymore

Related Topics

Leave a reply