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!
If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.
Thank you Olena! I have been 4 hours fighting with this background image and outlook. Still I still have two problems.
one is that the image appears full-size and i do not know how to resize it to 600px
the second one is that i can not see the background image in android6-gmail
Thank you for the tips
peter
I am happy, that you have found some of the information, that I shared useful. I have worked on this ~4 years ago, so, unfortunately, can’t help you with your other questions, but I hope you’ll find fixes and answers for them