Repeating <td>-background in OL 2007 with VML

I'd like to discuss with you this solution I found for a tiled background solution in Outlook 2007 using VML.

<html>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<head>
<style type="text/css">
v\:* { behavior: url(#default#VML); display:inline-block; }
</style>
</head>
<body>
<table><tr>
  <td width="300" height="100" bgcolor="#000000" background="bg_image.gif">
    <!--[if gte mso 9]>
    <v:shape coordsize="300 100" style="width:300px; height:100px;" path="m 1,1 l 1,100, 300,100, 300,1 x e" stroked="false" >
      <v:fill type="tile" src="bg_image.gif" />
      <![endif]--> 
      Lorem ipsum dolor sit amet.
      <!--[if gte mso 9]>
    </v:shape>
    <![endif]-->
  </td>
</tr></table>
</body>
</html>

I use just one simple shape-Element. This must have a defined path and this path can be filled with a <fill> element. I'm not sure how to avoid the top left padding of the text (lorem ipsum...) and it would be nice if we could define this repeating background as high as needed for growing content without overlapping other elements of the design.

BThies BThies, 6 years ago

If you place another shape next to it in an absolute position - it'll sit on top of it.  Adjusting the top and left to a negative will align it.

The problem we face with VML is the requirement of a height and width for a shape.  Having to set those removes the need for tiling since the background would be a static size anyway (unless it's a massive space where image size would be a consideration and it would apply better).

If you can figure out how to have the shape dynamically increase in size (height being the big one), you'll solve the biggest issue template designers are facing with dynamic repeater regions with backgrounds.

In the meantime, you can use oversized images (height wise) and set the next z-index higher for everything flowing downward in the table.

------------------<tr>
Original Background Image Shape1 -   z-index 1
Shape with Text Over Shape1 - z-index 100
------------------<tr>
Background Image Shape 2 - z-index 2  (Covers over Shape1's extended area)
Shape with Text Over Shape2 - z-index 100

and so on...

Obviously this requires a lot of thought into how large an area the user will possibly use in an article, and how many backgrounds would be needed moving down... etc.


Brian Thies
Professional Email Developer
Thies Publishing
CCode, 6 years ago

Thanks for your suggestion, I appreciate it. But that would blow up the code. I'd like to find a simpler, leaner solution and threre are so many more VML-elements, attributes and the documentation isn't very detailed.

I hope we can find all those undocumented details that lead us to a nicer solution.

There is a shape-subelement called TextBox:
http://msdn.microsoft.com/en-us/library … S.85).aspx

I already tried to use this for the text and position it absolutely, but for me it didn't work. You're welcome to try it.

As you can see, Brian, my <td>-background solution can be regarded as a replacement for the solution you found using the <v:image> tag but with the additional possibility to tile the background-image.

By the way now there is a third possibility to declare the use of VML using this meta-tag:

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>

instead of

<html xmlns:v="urn:schemas-microsoft-com:vml">

Thanks so far!

CCode, 6 years ago
BThies :

------------------<tr>
Original Background Image Shape1 -   z-index 1
Shape with Text Over Shape1 - z-index 100
------------------<tr>
Background Image Shape 2 - z-index 2  (Covers over Shape1's extended area)
Shape with Text Over Shape2 - z-index 100

Thanks again! Now I understood your approach. But, wow - this could mean that you have to adjust many dozens z-indexes all over your HTML... Ummm!

BThies BThies, 6 years ago
CCode :
BThies :

------------------<tr>
Original Background Image Shape1 -   z-index 1
Shape with Text Over Shape1 - z-index 100
------------------<tr>
Background Image Shape 2 - z-index 2  (Covers over Shape1's extended area)
Shape with Text Over Shape2 - z-index 100

Thanks again! Now I understood your approach. But, wow - this could mean that you have to adjust many dozens z-indexes all over your HTML... Ummm!

LOL!  Trust me - I haven't used it.  :-)


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago
CCode :

.

As you can see, Brian, my <td>-background solution can be regarded as a replacement for the solution you found using the <v:image> tag but with the additional possibility to tile the background-image.

Completely understood - and if we can dynamically size the shape, it'll be the million dollar solution.  I spent days going through every VML guide Microsoft offers trying to find a solution for the sizing, but every VML object attempted required a height and width.

Keep working at it!  There MUST be a solution.


Brian Thies
Professional Email Developer
Thies Publishing

Join 200,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