htmlemailoutlookhtml-emailvml

VML background image positioned on bottom for Outlook


I am creating an email which has to be look good on Outlook. On the email, I have a paragraph of text (which heights amounts to 324px), and I need a background image (height: 153px) located on the bottom of the paragraph.

I now have the below codes:

<td align="center" valign="top" background="background.png" style="background-repeat: no-repeat;background-position:bottom;background-size: contain;" height="324" bgcolor="#ffffff">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 620px;height: 153px;">
        <v:fill type="frame" src="background.png" color="#ffffff"  />
      <![endif]-->
      Body Text here
    <!--[if gte mso 9]>
      </v:rect>
      <![endif]-->
    </td>

The current problem is:

  1. The background image is not to scale. It's stretched to the full height of the paragraph.
  2. I'm not sure how to position it on the bottom of the paragraph.

Can anyone good at VML help me with this? Thanks a lot!


Solution

  • You may need to think outside the box on this one ;)

    Option (A), create the background image with the required height, as per Syfer's comment

    Option (B), Put most of the content above the VML, and only a couple of lines in the VML part. That way the VML part won't stretch, but you'll still get the effect, i.e.:

    <td align="center" valign="top" background="background.png" style="background-repeat: no-repeat;background-position:bottom;background-size: contain;" height="324" bgcolor="#ffffff">
    <p>Body text here</p>
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 620px;height: 153px;">
            <v:fill type="frame" src="background.png" color="#ffffff"  />
          <![endif]-->
          Part of body Text here
        <!--[if gte mso 9]>
          </v:rect>
          <![endif]-->
        </td>