Outlook vml background

Is it possbile to have a table td with a background image and another table td nest within that one to have a button? I cannot get it to work.

<!-- MAIN -->
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
        <td background="http://htmltest.denalimarketing.com/HSBC/Emails/emails/JulySamsung/images/bodyBg.jpg" bgcolor="#003a64" height="547" width="600" valign="top">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:200px; width:620px; top:0; left:0; border:0; z-index:1;' src="http://htmltest.denalimarketing.com/HSBC/Emails/emails/JulySamsung/images/bodyBg.jpg"/>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:547px;">
            <v:fill type="tile" src="http://htmltest.denalimarketing.com/HSBC/Emails/emails/JulySamsung/images/bodyBg.jpg" color="#003a64" />
            </v:rect>
              <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
            <td height="547" width="600">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                <tr>
                <td height="32" width="90">
                    <!--[if mso]>
                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://emailbtn.net/" style="height:32px;v-text-anchor:middle;width:90px;" arcsize="13%" strokecolor="#efd632" fill="t">
                    <v:fill type="tile" src="http://htmltest.denalimarketing.com/HSBC/Emails/emails/JulySamsung/images/buttonBg-yellow.jpg" color="#efd632" />
                    <w:anchorlock/>
                    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Shop Now</center>
                      </v:roundrect>
                    <![endif]-->
                    <![if !mso]>
                        <a href="http://emailbtn.net/" style="background-color:#efd632;background-image:url(http://htmltest.denalimarketing.com/HSBC/Emails/emails/JulySamsung/images/buttonBg-yellow.jpg);border:1px solid #efd632;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:32px;text-align:center;text-decoration:none;width:90px;-webkit-text-size-adjust:none;">Shop Now</a>
                    <![endif]>
                </td>
                </tr>
                </table>
            </td>
            </tr>
            </table>
            <!--[if gte mso 9]>
            </v:textbox>
              </v:rect>
              <![endif]-->
        </td>
        </tr>
        </table>
    <!-- END MAIN -->

Stig Stig, 3 years ago

Hey Joe,

Unfortunately, VML elements can't be nested like this. However, if you're not placing any other content on top of the background image, it should be possible to achieve this layout without a background image.

If you slice the bodyBg.jpg image and place the pieces in a table so it surrounds the button, you can keep the emailbtn code you're using for the button, and that should all work fine. Does that make sense?


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
j.sedlock99, 3 years ago

Hi Stig, thanks for your reply! Yes, makes sense. I just had hopes that it was possbile :) Thanks again and thanks for creating emailbg.net

kaiwinn, 2 years ago

Hi @Stig! I'm trying to nest background images also, but I don't understand your explanation above. Could you elaborate? For reference, I'm trying to do something like  this:

<imageFrameBG>
    <theImageAsBG>
        <img src="imageOverlay.png" alt="Image Overlay">
    </theImageAsBG>
</imageFrameBG>

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