Background-image for Outlook | Community
Skip to main content
Level 4
November 6, 2015
Question

Background-image for Outlook

  • November 6, 2015
  • 1 reply
  • 2506 views

Hello!

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

Here is example and code:

<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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Casey_Grimes2
Level 10
November 6, 2015

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]-->).

Level 4
November 10, 2015

Hi Courtney,

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