Menu
For our email templates we are currently using the code below to enable backgrounds in some Outlook versions, however, I've been trying to wrap my head around VML to see if it's possible to emulate the CSS properties to some extent, but the little information I find on VML seems incomplete or hard to put into context.
In practice, there are basically just two properties that are mainly of interest, horizontally centered, and repeat-x only. I would assume that these are so basic VML should easily support it, but I can't figure it out it seems...
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="..." color="#000000"/>
</v:background>
<![endif]-->
285
From what I can dig up, VML background tags are difficult to work with. They don't appear to be very flexible and I am not sure how much luck you are going to have trying to manipulate them like you would a CSS element.
That said, shape and image tags appear to be much more cooperative (relative to their VML counterparts). The most interesting article that I found on the topic was this one: https://web.archive.org/web/20140212122122/http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/
What the article says is that Outlook tends to throw away CSS properties when it encounters them (as you have no doubt discovered). It then offers two alternative options for applying (image-based) backgrounds:
<body> tag of the HTML. Outlook apparently accepts this.Now the article discusses applying backgrounds to table cells, however the technique that it uses should be just as valid for applying backgrounds in other contexts. (Worst case you may even want to consider using a table if it gets you the visual layout that you are after).
So anyways the VML that the author of the article uses is this:
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); (+ more CSS)' src="background url" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); (+ more CSS)'>
<div>
<![endif]-->
<!-- An HTML table -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
So at a glance if you decide to use an image, you should simply be able to define CSS properties directly on the image tag itself. Your other option is to use a shape which may be better suited to you anyways as you appear to want to use a calculated background. In this case, according to the spec found here http://www.w3.org/TR/NOTE-VML#:
The VML shape and group elements participate fully in the CSS2 visual rendering model.
In which case, much as in the above example, you should have no problem applying CSS properties to a shape element using the style tag (as shown in the above example). This should take care of your background-repeat problem.
As for centering, the spec states the following:
center-x, center-y
These properties may be used to specify the center of the block level box of the element within its parent container box.
This should take care of the horizontal-centering issue for you. For information...
The shape and group elements are containing blocks for their content - they define a CSS2 "block level box".
...so certain layout problems should be resolvable by applying a containing shape or group element.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
