Setting a Background Image for Outlook Version of Email

Backgrounds might seem like they should be a simple effect to achieve in HTML email, but that’s not always the case. Outlook 2007, 2010 and even 2013 will give users who rely on the TD background-image property a lot of trouble. Because of these problems many have turned to Vector Markup Language (VML), part of the Office Open XML standards. VML has mostly been scrapped in favor of SVG, but older email clients still use it.

Edit a Background Image for Outlook in Email

Setting a background image just with a Visual editor does not update the code. Outlook will not show the correct image unless you manually edit the HTML. You can edit HTML manually with Code editor or Visual editor.

Edit with Code Editor

There is a wide range of text editors out there that will do the trick, but we recommend Sublime Text (Mac, Windows, Linux).

  1. Go to the template HTML file.
  2. Open it with text editor.
  3. Go to the module you want edit.
  4. You will see the VML markup as shown below
  5. Edit the src=”” URL with absolute URL of your background image. You need to host your image somewhere to display in emails.
  6. Save the file and test it with outlook version.

Edit with StampReady Builder

You can also edit VML code with the StampReady builder.

  1. Login and go to the StampReady Dashboard.
  2. Open your template editing view.
  3. Hover on your module and you will see the </> code bracket on center right position.
  4. Expand </> code bracket. You will see the html version of email.
  5. Edit absolute URL of background properties.
  6. Save the file and test it with outlook version.

Edit with Mailchimp Builder

You can also edit VML code with Mailchimp builder.

  1. Login and go to the Mailchimp Dashboard.
  2. Navigate to the Templates
  3. Edit or create your template.
  4. Go to the code view of template.
  5. Edit absolute URL of background properties.
  6. Save the file and test it with outlook version.

Edit with Campaign Monitor

It isn’t possible to edit or export the HTML of an email builder email or template. You can, however, access your designs at any time from the template library to use again and again. So you need to get edit Campaign Monitor template file and then import it as a new template.