Background Image Techniques
Adding background images in modules
Background images in emails are a more “sophisticated” approach in the email world. You’ll find that many of the modern email clients (Apple, Gmail, etc) support background images flawlessly. However, Microsoft Outlook is notoriously unfriendly with background images.
In order to achieve the sophistication we are looking for with background images in Outlook, we needed to use a Microsoft-proprietary language called VML (Vector Markup Language). The details below pertain only to Microsoft Outlook, as every other client is “smart” and knows how to handle background images.
For the most part, you can/should continue to use background images as usual. The amount of text displayed on top of the image dictates the needed height for an image. Generally speaking, you should never exceed 500px height in your background cards (whether using half- or full- cards).
When your text amount is smaller, and the image needs to display at less than 500px high, the following visual helps explain what happens. The image displays at the correct proportions, and the “extra” part of the image is “hidden” by the smart email clients. You can (optionally) configure the Outlook height to ensure a successful user experience without too much “extra image”. There are videos below explaining how to go about this process.
visual of background image display with VML tile
The modules are set up for VML “tile” which means that if the content height exceeds 500px, the image will repeat itself. This is not a “bug” – this is a good indicator that you need to have a designer create a custom image size, decrease the amount of text you’re using, or use a different module entirely.
Email Background Images – How to modify Outlook Height
Email Background Images – Modifying Half Card Height with Smaller Images
This may be used when using the full or half card modules to simulate a banner (e.g. for a newsletter) which needs to be shorter than 500px.
Email Background Images – How to modify the Outlook height for images taller than 500px
This will rarely be used, and in fact will require a properly-sized image from a designer.
Pro tip: Use Chrome Inspector to easily determine Outlook background image height
If you’re wondering how to figure out exactly how tall your Outlook image height should be (especially if it needs to be shorter than the default 500px), you’ll find the next video helpful!