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, 3 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, 3 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, 3 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, 3 years ago

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

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