Background-image for Outlook

Igor_Khripunov
Level 4

Background-image for Outlook

Hello!

I am using VML markup to add background image in Outlook.

Here is example and code:

img.png

<table border="0" cellspacing="0" cellpadding="0" width="600">

                        <tr>

                            <td height="200" background="my_img.jpg" style="background: url(my_img) no-repeat;">

  <!--[if gte mso 9]>

  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">

    <v:fill type="frame" src="my_img.jpg" color="#f7f9f8" />

    <v:textbox inset="0,0,0,0">

  <![endif]-->

                                <div>

                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">

                                        <tr>

                                            <td height="200" valign="middle" align="center">

                                              my header text is here

                                            </td>

                                        </tr>

                                    </table>

                                </div>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]-->

                            </td>

                        </tr>

                    </table>

AND when I try to modify the card via the visual editor, everything breaks down, because this parth of the code <![endif]--> changes to &lt;![endif]--&gt;

Short .gif demonstration - Gyazo - b6ba270a448446b36996c7644180f4dc.gif

In the result I cannot fix plain text version of the ecard.

Is any suggestion?

2 REPLIES 2
Casey_Grimes
Level 10

Re: Background-image for Outlook

Hi Igor,

As a general rule, if you need to use VML with an email it should actually be defined at the template level (and then if you need to swap out the background image simply use a program-level token) to prevent this sort of thing from happening. Ironically, easier to do non-MSO exceptions when working with Marketo's editor—it respects that syntax a bit better due to it looking more like a traditional comment (i.e., <!--[if !mso]><!-- --> Your non-Outlook content<!--<![endif]-->).

Igor_Khripunov
Level 4

Re: Background-image for Outlook

Hi Courtney,

Thank you for answer. Yes, it works and make sense, but not convenient way.