Sending email with background image

12,388

The only way I was able to do this is via this code (TD tables). I tested in outlook client 2010. I also tested via webmail client and it worked for both. Copy and paste this and the only things you have to do is change your_image.jpg (there are two instances of this for the same image make sure you update both for your code) and #your_color.

<td bgcolor="#your_color" background="your_image.jpg">

<!--[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:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/>

<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>

<![endif]-->

<p>Text over background image.</p>

<!--[if gte mso 9]>

</v:shape>

<![endif]-->

</td>

source

Share:
12,388
Patrick
Author by

Patrick

Updated on June 04, 2022

Comments

  • Patrick
    Patrick over 1 year

    I try to create an email with an image in a table as background image. I found a part of code that supposedly should work. In most email clients it does work, though in outlook 2010 I see the image, but not the text. Is there anything that I can do to make it work?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HVAC Success Confirmation</title>
    </head>
    <body style="background-color: #999999; vertical-align: top;">
    <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td style="width: 600px; height: 350px; background-image: url('http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg');">
            <!--[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; width: 600px; height: 350px; top: 0; left: 0; border: 0; z-index: 1;' src="http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
            <![endif]-->
            <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                <td height="350" align="center" valign="top" style="padding-top:80px">
                    <p>This table in here has a bunch of stuff I want to lay over the background image...</p>         
                </td>
              </tr>
            </table>
            <!--[if gte mso 9]>
            </div>
            </v:shape>
            <![endif]-->
        </td>
    </tr>
    </table>
    </body>
    </html>
    

    I found multiple pages like http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/ and http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/ but it did not got me further.