IE 2007 2010 2013 BG Image and VML

I'm using the bullet proof background image code generator but still not getting the background image unless I assign it a "height"  I'd like to learn this once and for all.

Here is the appropriate code:

<td background="http://consultyou.net/HFM_NL_IMG/center.gif" bgcolor="#ffffff" width="20" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:20px;">
    <v:fill type="tile" src="http://consultyou.net/HFM_NL_IMG/center.gif" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div align="center"></div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

Thanks in advance for any help.

torweb, 4 years ago

Here is the complete code:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">
<!--
#main {
    width: 100%;
}
body {
    background-color: #81BC3D;
}
.table1 {background-color:#FFFFFF;}

.left_right_main {
    width: 10px;
    }
    
li
{
margin-left: -22px !important;
}
    
.center_divider {width: 20px; background-image:url(images/center.gif); background-repeat:repeat-y;}

.left_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;}

.right_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;}

h2 {font-size:16px; font-family:Arial, Helvetica, sans-serif; color: #1C3F95;}

.permission {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; padding-right: 24px; background-color: #ffffff;}
.permission2 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; background-color: #ffffff;}
a:link {
    color: #04715B;
}
a:visited {
    color: #04715B;
}
a:hover {
    color: #04715B;
}
a:active {
    color: #04715B;
}

.fb {width: 55px;}
.twit {width: 55px;}
-->
</style>
</head>

<body>
<div id="main" align="center"><table width="640" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="top" class="table1"><table width="640" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="10" class="left_right_main">&nbsp;</td>
    <td colspan="2" class="permission">&nbsp;</td>
    <td width="55">&nbsp;</td>
    <td width="55">&nbsp;</td>
    <td width="11" class="left_right_main">&nbsp;</td>
  </tr>
  <tr>
    <td class="left_right_main">&nbsp;</td>
    <td width="447" class="permission"><webversion>View In Web Browser</webversion></td>
    <td width="62" class="permission2"><forwardtoafriend lang="en"><img src="images/forward.jpg" width="60" height="22"></forwardtoafriend></td>
    <td class="fb"><fblike></fblike></td>
    <td class="twit"><tweet></tweet></td>
    <td class="left_right_main">&nbsp;</td>
  </tr>
</table>
</td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><img src="images/NU_HEADER.jpg" width="640" height="249"></td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><table width="640" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="left_right_main">&nbsp;</td>
          <td align="left" valign="top" class="left_col_content"><repeater>
 <h2 align="left">
  <singleline label="Title" repeatertitle='true' >Title</singleline>
 </h2>
 <multiline label="Article Body" >Enter the full text</multiline>
</repeater></td>
<td background="http://consultyou.net/HFM_NL_IMG/center.gif" bgcolor="#ffffff" width="20" valign="top">
 <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:20px;">
    <v:fill type="tile" src="http://consultyou.net/HFM_NL_IMG/center.gif" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div align="center"></div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
          <td align="left" valign="top" class="right_col_content"><repeater>
 <h2 align="left">
  <singleline label="Title" repeatertitle='true' >Title</singleline>
 </h2>
 <multiline label="Article Body" >Enter the full text</multiline>
</repeater></td>
          <td class="left_right_main">&nbsp;</td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><img src="images/NU_FOOTER.jpg" width="640" height="230"></td>
    </tr>
    <tr>
      <td align="right" valign="top" class="permission"><unsubscribe>Unsubscribe</unsubscribe></td>
    </tr>
    <tr>
      <td align="left" valign="top" class="permission">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Hi there, torweb - now you've posted your full code, I see what you're doing :) So, the bad news is that this VML background technique is not designed to work with content areas/elements that scale in any way, ie. don't have a definite height. You need to explicitly set a height to get it to work, I'm sorry to say.

The good news is that you really don't need to use a background image to add a border that scales to the height of your content area. The more reliable thing to do is use a border, or a table cell with a background color, ala:

<td bgcolor="#1C3F95">&nbsp;</td> <!-- Cell with bgcolor -->
<td>&nbsp;</td> <!-- Bit of padding here -->

The full code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
#main {
    width: 100%;
}
body {
    background-color: #81BC3D;
}
.table1 {
    background-color:#FFFFFF;
}
.left_right_main {
    width: 10px;
}
li {
    margin-left: -22px !important;
}
.center_divider {
    width: 20px;
    background-image:url(images/center.gif);
    background-repeat:repeat-y;
}
.left_col_content {
    width: 300px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333333;
}
.right_col_content {
    width: 300px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333333;
}
h2 {
    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;
    color: #1C3F95;
}
.permission {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#273A67;
    font-weight:bold;
    padding-right: 24px;
    background-color: #ffffff;
}
.permission2 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#273A67;
    font-weight:bold;
    background-color: #ffffff;
}
a:link {
    color: #04715B;
}
a:visited {
    color: #04715B;
}
a:hover {
    color: #04715B;
}
a:active {
    color: #04715B;
}
.fb {
    width: 55px;
}
.twit {
    width: 55px;
}
-->
</style>
</head>
<body>
<div id="main" align="center">
  <table width="640" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="top" class="table1"><table width="640" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="10" class="left_right_main">&nbsp;</td>
            <td colspan="2" class="permission">&nbsp;</td>
            <td width="55">&nbsp;</td>
            <td width="55">&nbsp;</td>
            <td width="11" class="left_right_main">&nbsp;</td>
          </tr>
          <tr>
            <td class="left_right_main">&nbsp;</td>
            <td width="447" class="permission"><webversion>View In Web Browser</webversion></td>
            <td width="62" class="permission2"><forwardtoafriend lang="en"><img src="images/forward.jpg" width="60" height="22"></forwardtoafriend></td>
            <td class="fb"><fblike></fblike></td>
            <td class="twit"><tweet></tweet></td>
            <td class="left_right_main">&nbsp;</td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><img src="images/NU_HEADER.jpg" width="640" height="249"></td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><table width="640" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="left_right_main">&nbsp;</td>
            <td align="left" valign="top" class="left_col_content"><repeater>
                <h2 align="left">
                  <singleline label="Title" repeatertitle='true' >Title</singleline>
                </h2>
                <multiline label="Article Body" >Enter the full text</multiline>
              </repeater></td>
            <td bgcolor="#1C3F95">&nbsp;</td>
            <td>&nbsp;</td>
            <td align="left" valign="top" class="right_col_content"><repeater>
                <h2 align="left">
                  <singleline label="Title" repeatertitle='true' >Title</singleline>
                </h2>
                <multiline label="Article Body" >Enter the full text</multiline>
              </repeater></td>
            <td class="left_right_main">&nbsp;</td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><img src="images/NU_FOOTER.jpg" width="640" height="230"></td>
    </tr>
    <tr>
      <td align="right" valign="top" class="permission"><unsubscribe>Unsubscribe</unsubscribe></td>
    </tr>
    <tr>
      <td align="left" valign="top" class="permission">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>

My mantra - only use workarounds when you have to. Old-fashioned HTML wins the day when it comes to email coding.


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

I just wanted to add a quick clarification: The code you've generated does indeed allow the background image height to fit the content, but for this to work, it needs to be wrapped around the content that has a variable height.

That being said, Ros' solution, using a table cell with a background color and eliminating the need for a background image, would be my recommendation too.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
torweb, 4 years ago

Thanks to you both.  Sometimes you just need to step back and pause for a moment...worked great.  Thanks again..

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free