I am creating HTML emails and would like a background image in the table row section to show the background images behind the table cells in that row.
As I understand, for Microsoft Outlook, I need to use table structure, and read articles like these:
https://www.emailonacid.com/blog/article/email-development/html-background-images-in-email/ http://www.emaildesignreview.com/email-code/html-bulletproof-background-images-in-email-3850/ https://backgrounds.cm/ https://buttons.cm/
Those pages specify a width and height, but I want a dynamic width and height that fills the table row behind the contents of the table row.
I have tried VML already and it places the background over the top of the background and messes up the table width.
So far I get this far with a layout like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="width=device-width" name="viewport"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
</head>
<body id="body">
<div style="display: block; width: 100%;">
<table role="presentation" align="center" width="600" style="border-collapse: collapse; table-layout: fixed;mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout:fixed; width: 600px;">
<tr cellpadding="0" cellspacing="0" background="img.jpg" style="background-image: url(img.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;">
<!--[if mso]>
<v:rect fill="true" stroke="false" style="width: 600px;">
<v:fill type="frame" src="img.jpg"/>';
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
</v:rect>
<![endif]-->
<td colspan="3">
<p style="text-align: center;">Heading</p>
</td>
</tr>
<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>
</div>
</body>
</html>
And I have experimented with the inline styles with mso-width-percent, mso-height-percent, width, height. Still does not fit the specified 600px. I would like the background to be like this CSS:
background-repeat: no-repeat;
background-position: center;
background-size: cover;
The v:textbox however, is no good as the content would have links provided in the table cell.
With CSS capable clients it works as expected and is far easier but does not work with Outlook.
