non-repeating background image in Outlook

HI all,
I'm hoping someone else has figured this out..

I'm using the code here: http://emailbg.net/ to include a background image in an email. It's working perfectly except I can't seem to figure out how to have a non-repeating background image. I've tried changing

 fill type="tile" 

to

 fill type="frame" 

but that didn't do it in Outlook 07 and 10.

Any thoughts?

roshodgekiss roshodgekiss, 1 year ago

Hi bmayfield, you may have to set the dimensions of the image/table cell in the VML code. This blog post may have a few tips that can help you here. Juicy snippet:

Note that height and width dimensions in the VML have to be the same as the height and width of the table cell. To prevent the image from repeating, you can either match the background image dimensions to cell width and height, or replace <v:fill type="tile" with <v:fill type="frame" to resize the image to the dimensions defined in <v:rect>.

If you're still not getting any love from this, feel free to post your code here and we'll give it a look :) Best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
bmayfield, 1 year ago

Hi roshodgekiss,

Thanks - I saw that, but it seems like that only works for a background image in a table cell... I'm trying to have a non-repeating background image in the body of an email. Did I miss something?

<div style="background-color:#000000;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="frame" src="image URL here" color="#000000"/>
  </v:background>
  <![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" background="image URL here" style="background-position: top; background-repeat:no-repeat;" valign="top">

body of the email here

    </td></tr>
</table>

  </div>
roshodgekiss roshodgekiss, 1 year ago

Hi bmayfield, now I see your approach here - to be honest, using a static background image like this is largely untested, as far as I know. You can try:

Changing the line:
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
to...
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="f">
/* fill="f" is experimental! */ 

...or surrounding the email content with a table (single table cell) and using the code provided by 'A single table cell' in Emailbg.net.

Please, a word of warning that the whole-email background image method you're using here can be fairly glitchy at times. If you do get it working, make sure you test like crazy across the Outlooks. Either way, let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account