Outlook 2013 background image broken

Question

I have problem with background image in Outlook 2007/2010/2013.

Code:

<table cellpadding="0" cellspacing="0" border="0" width="580" style="font-family: Arial;">
        <tr>
        <td background="http://test.endlesspeak.cz/img/bg-deepak.jpg" bgcolor="#a7a8ab" width="580" height="242" style="text-align: left; vertical-align: middle; color: #203244; font-size: 12pt; padding: 0; margin: 0;">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:242px;margin: 0; padding: 0;">
            <v:fill type="tile" src="http://test.endlesspeak.cz/img/bg-deepak.jpg" color="#a7a8ab" />
            <v:textbox inset="0,0,0,0">
          <![endif]-->  
          <div valign="middle">

            <p valign="middle" style="padding: 0; margin: 50px 260px 0 55px; vertical-align: middle; font-family: Arial; color: #203244; font-size: 12pt;">Poprvé navštíví ČR <b style="color: #2a80b9; text-decoration: underline;">Deepak Chopra</b>, světová autorita v oblasti spirituality a osobního rozvoje, populární americký spíkr a spisovatel. Jako proslulý lékař formuloval vlastní teze léčení, ve kterých propojuje tradiční východní léčitelské umění s tím nejlepším, co nabízí západní medicína.</p>

          </div>
          <!--[if gte mso 9]>
            </v:textbox>
          </v:rect>
          <![endif]-->
        </td>
    </tr>

</table>

Problem is just in Outlook 2007/2010/2013. In Outlook 2002/2003/2011 it works.

Outlook 2011: https://litmus.com/pub/2e23724/results#ol2011-full_on - background image works

Outlook 2013: https://litmus.com/pub/2e23724/results#ol2013-full_on - background image broken

Thank you for help.

I'm not very familiar with outlook email quirks, but can you put a style attribute on it instead? style="background-image:url(http://test.endlesspeak.cz/img/bg-deepak.jpg);" — dzny, Mar 24 '14 at 15:14
the links on this related stack overflow issue may assist you. good luck. email blasts are a pain. http://stackoverflow.com/questions/3587328/background-image-on-td-in-outlook-2007 — dzny, Mar 24 '14 at 15:29
it is good practice to not use image as a background. most of the outlook older version still don't support background-image. better use a `` tag. — Kheema Pandey, Mar 24 '14 at 18:14
http://stackoverflow.com/questions/23280715/full-width-backgrounds-on-outlook-07-10-13 — davidcondrey, May 07 '14 at 07:34

score 0 · Answer 1 · edited Oct 07 '21 at 13:28

Use a Multipart email with a base64 encoded image, such as the following:

The following figure shows a message that was sent using the message format MHTML. It encodes the HTML objects as images in MHTML format, and retrieves the SKY.jpg image from the location in the ASP page. It encodes the image in BASE-64, and gives the image a CID, to which it internally links the image SRC attribute.

--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://www.sky.com

<td Background="cid:part1.mimetest-15@dsv.su.se">

--==boundary-1
Content-Type: image/gif
Content-ID: <part1.mimetest-15@dsv.su.se>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="SKY.gif"

Which would translate to something like this in the code in question:

--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://test.endlesspeak.cz

<td background="cid:bg-deepak.jpg">
--==boundary-1
Content-type: image/jpg; name="bg-deepak.jpg"
Content-ID: <bg-deepak.jpg>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="bg-deepak.gif"

References

most_wanted · Answer 2 · 2020-09-17T15:03:59.887

2007/2010/2013 uses another and older version of the email rendering version, so it's more likely to get some errors. Here is a version that works for me:

<td background="yourimage.png" bgcolor="#FFFFFF" class="a8 a9 a10" style="height:50px;background-image:url('yourimage.png')" valign="top">
<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="width:700px;height:50px;"><v:fill color="#FFFFFF" src="yourimage.png" type="tile" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr class="a8" style="height:50px">
<td valign="top">some content
</td>
</tr>
</table>
<p style="margin:0;mso-hide:all">
<o:p> 
</o:p>
</p>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
</td>

Take care that the heights of all elements are corresponding to the image height - otherwise it will not work.

Outlook 2013 background image broken

2 Answers2

Linked