Background images that work everywhere, including Outlook
Background images are a hard thing to get right in emails, mainly because of Microsoft's Word-based rendering engine for Outlook and Windows 10 Mail, which does not support CSS background images. Pine makes it a breeze to get them working across the board.
With the exception of Outlook and Windows Mail, the majority of email clients support CSS background images. In addition to this inline style, we also include the background="" attribute, for Lotus Notes and a couple international clients (of course, if you don't need to support the latter ones, you can remove this HTML attribute).
We simply add these on the column cell inside the row table:
Make sure you also specify a fallback background colour that constrasts well with your text, in case the image doesn't load for some reason. Simply add the bgcolor="" attribute on the column cell, as shown above.
We can take it a step further and even use retina background images in email, thanks to
background-size: cover :
In a perfect world, that's all there is to it. In the real world though, there is also...
Since 2007, Outlook does not support CSS or HTML background images. The same applies to Windows 10 Mail. Instead, we need to use (and cope with the caveats of) VML, which Outlook's Word rendering engine does support.
Immediately inside the cell to which we applied the HTML/CSS background image, we add an Outlook-specific HTML comment that contains the necessary VML code. As you can see, the tags of this code are closed in a separate comment block, which allows us to add our content in between:
This VML code enables background images even in Windows 10 Mail, through the use of the <v:image> tag instead of the traditional <v:fill>. However, it does come at a cost:
Add the VML code right after
The code above sets the email body background image to tile, but you can change it to 'frame' if have a large enough image.