How to make background image visible in the emails in the Outlook

Even if you think about yourself as front-end developer from time to time you would be doing some a little bit strange tasks. For me last week this task is creation markups for emails. One of the hardest in this task is to primary test emails markups, that were developed. If you haven’t account at Litmus or at any other systems that emulate mail client you would need just send test emails. If you ever work on the creation markups for the email you know that most of the problems and bugs will come from the testing markup view in the Outlook.

On of the most well-known bug from that category is the fact that background images are not displayed in the Outlook if they are added to the markup through styles or/and background tags. After some googling it is possible to find the hack – use VML to display an image. Here you can find the good working code generator for this purpose – Bulletproof background images. Most oftenly you code snippet for this part of the email would be looking like this:

 This code works fine. The problem comes when you need to place some text over this image. If you just add the text between two <div>, in all email clients in spite Outlook you will see text where you have placed it using css rules on the <td> (valign, vertical-align, text-align etc.). In the Outlook your text will appear in the top left corner over the background image. So, how to be in this case? Let’s imagine, that you need to place the text in the vertical and horizontal center of the background image. To align your text in the horizontal center surround your text or your piece of code by the vml tags <center></center>. Align content vertically is a little bit harder. For this, you need to wrap your text or a piece of code in the <table>  tag. Pay attention for adding height to the <td> tag inside this table. The final solution would be looked like this:  

Notice that I have removed color tag from the <v:fill> tag. For some reasons if you are inserted some peace of code (with <div> with styles for example) the fallback color is shown in spite of background image in the Outlook. The image become available only after user clicked on the area where the background picture must be.

If you have your own hacks how to work better with email template creation – share in the comments!

Olena Sovyn
Front-end developer (London, UK). I ❤ React, Redux, lodash, React Storybook, and functional programming overall. Always open to learn something new

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Spelling error report

The following text will be sent to our editors: