Make background images work almost everywhere, even in Outlook
Background images are a hard thing to get right in emails, mainly because of the Outlook desktop app, which does not support CSS background images. This design pattern makes it a breeze to get them working even in nasty Outlook.
IMPORTANT: This uses VML to make images work for Outlook. Drag and drop editors, such as Campaign Monitors', MailChimp's, or StampReady's currently don't support setting the image path and dimensions for the VML code too, so always make sure you do that yourself before using an email template editor.
These work in all email clients Pine is compatible with.
You add the background image with an attribute on a full 700px wide column inside the row table, and the VML fallback immediately inside it, as shown in the examples.
Unlike regular columns, the column holding a VML background image must not have any side padding, otherwise the layout will blow up sideways in the Outlook desktop apps.
For the VML code to render image height properly, you need to set its height to be the same as the column's height.
You can get the column's height through your browser's developer tools.
You also need to make sure you specify the fallback background colour, both in the inline CSS and on the VML object's color="" attribute.
On mobile, the has-bg-image class on the column helps the image cover the entire height by setting background-size: cover, in cases where you don't want to set it inline (if setting it inline, there's no need to use this mobile class).