Background Images

Background Images

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.


Regular Background Images

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).

WARNING: The code highlighter we use autocloses self-closing tags. In the examples below, the v:fill should actually be written as <v:fill type="tile" src="http://lorempixel.com/700/440" color="#1F2225" />
Example: Regular Background Images
                        
                          
                          
 

Some Nice Heading

 
Theme Mountain

Current Version