Background centered on Outlook with vml?

Hello,

Is it possible to have background image centered in Outlook using the vml technique, like you would with the following code?

body {
  background: url(http://example.com/example.img) top center no-repeat;
}

No tiling and centered even when the window is smaller then the image (the sides disappear).

Thank you

roshodgekiss roshodgekiss, 2 years ago

Hi aristidesfl, I don't think this is possible using our current background image technique, I'm sorry to say. Your best bet is to make the background image area the same dimensions as the background image itself. I hope this helps!


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

You can use the position attribute on the VML fill tag

<v:rect>
  <v:fill type="pattern" position="0.5,0" src="myimage.gif"/>
</v:rect>

I'd be wary of using background positioning as it doesn't work in outlook.com.


Michael Muscat
roshodgekiss roshodgekiss, 2 years ago

Oh wow, that's news to me! Thank you so much for sharing that, zerocents :D


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

Here's how I do it for a single image:

<body bgcolor="#000000" style="width:100% !important; margin:0; padding:0; background-color:#000000;">
<!--[if !mso 9]> 
<div style="background-color:#000000;">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="center" background="backgroundimage.jpg" style="background-repeat:no-repeat; background-position:top center;">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="behavior: url(#default#VML); position:absolute; height:1000px; width:1200px;mso-position-horizontal:center;mso-position-horizontal-relative:text; top:19px; z-index:-1" src="http://www.yourserver.com/backgroundimage.jpg" />
        <![endif]-->

             <table width="600" cellpadding="0" cellspacing="0" border="0">
                 <tr>
                      <td width="600">Continue with the rest of your code...</td>
                 </tr>
             </table>
        </td>
        </tr>
</table>
<!--[if !mso 9]> 
</div>
<![endif]-->
</body>

Keep in mind that not all email clients support "background-position" (it'll be aligned to the left in those clients), so it's usually best to use something that can fade into the body background color easily, and that doesn't absolutely require being perfectly centered at all times.


Brian Thies
Professional Email Developer
Thies Publishing
dj-jonze, 1 year ago
zerocents :

You can use the position attribute on the VML fill tag

<v:rect>
  <v:fill type="pattern" position="0.5,0" src="myimage.gif"/>
</v:rect>

This worked for me but it was still struggling with the responsive position of the image, so I played around and what worked for me was:

<v:fill type="tile" origin="0.5, 0" position="0.5,0" src="image url here" color="#000000" />

This was within a 100% width table cell and ensured my large background image was central and stayed central when the window pane was adjusted.

Origin 0.5 selects the centre point of the image (I think) and then position 0.5 makes sure that central origin is always positioned in the middle of the width.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098