background image on TD in Outlook 2007

I've been told using tables is the best way to send emails alt开发者_如何学Pythonhough it's been twice as difficult. I have setup the email in tables, set all of the cells which need backgrounds with the background="" property, as well as using CSS in <style> tags saying the same thing to cover my bases. The body background shows fine in outlook, but the TD backgrounds do not. I've tried also using but that doesn't work either. I've read that Outlook 2007 doesn't support background images and won't in the future, I'm thinking there has to be a way around it?

This should help:

You may have read earlier about our approach to applying a background image to an email. This involved not only adding a background image to the entire HTML page, but wrapping all content in a table with a background image applied to it. However, there was a limitation to this method, in that while you could apply a background image to the entire table, you couldn’t apply one to an individual table cell. Thanks to one of our star customers, Brian Thies, we’ve been shown a little code that not only will allow you to add a background image to a table cell, but works in most major email clients, too...

This technique... forces a background image to display in Outlook 2003/2007/2010...

Checkout this link for supported HTML and CSS tags in Outlook 2007:

http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx

MS also offers an HTML/CSS Validation Tool for Outlook 2007 at the URL above. That may at least provide you with a method of testing.

I have found that "Less Is More", when it comes to HTML emails - simple layout, simple techniques. Since each email client is going to vary, "dumbing" it down is the only way to guarantee the broadest reach.

I have made LOTS of HTML emails and have found that background images are NOT the way to go without using some hack.

Always use an <img> tag in a TD for your images. If you want text on top of an image, include it into the image and repeat the text in the alt attribute of the img tag.

You can see one I have made here. It uses very little CSS and img tags, plus it renders perfectly in almost all Email clients.

Unfortunately with HTML emails we're a bit limited to what we can do, but there are ways around it :)

Hope that help :)

Fortunately, there are formatting tweaks you can employ to address this. The upside is that making your HTML email Outlook 2007 compatible can decrease the chances that it will end up in a recipient’s junk folder. The downside is that you may have to change the way in which you approach formatting parts of your emails, thereby impacting the look and feel of your creatives. Below is a list of key items to look out for, and possible alternatives that are Outlook 2007 compatible.

• Background images – Background images will not display in Outlook 2007. This can leave a big, unintended void in your email. You should avoid using background images altogether. Whenever possible, you should use inline image tags instead. If you feel you must use a background image, set an appropriate background color to fill in for the potentially missing image. If you have text overlaying a background image, you can edit the image to include the text and use an image map for any links.

• Division tags – “Div” tags are not fully supported in Outlook 2007. Some of the more commonly used attributes that have been omitted are: float, clear, position, and padding. Without these attributes, positioning with div tags is virtually impossible. Instead, you should control the positioning of your email with a standard table.

• Forms – Forms are not supported in Outlook 2007. Outlook 2007 recipients will not be able to submit any forms embedded in an email. If you wish to give recipients the option to fill out a form, place a link to an online version of it within the email.

• Flash & JavaScript – It is recommended that you do not attempt to utilize Flash or Javascript on your HTML emails, due to their lack of support in email browsers (including Outlook 2007) and the fact that some filters will tag emails that contain Flash or JavaScript code. Also, most email readers will automatically disable this content as a security measure.

• Bulleted list with images – While both ordered and unordered lists are fully supported, lists that use images as bullets instead of standard bullets are not. If you need to use an image for your bullet points, one possible solution is to put your list into a two column table, using the left-hand column to place your bullets.

• Animated GIFs – Animated GIFs will not animate in Outlook 2007. The image will appear, but only the first frame of the animation will be displayed.

• Alt tags - Alt tags are also not supported. This is the text that is shown when an image does not load upon opening an email. However, most email readers do support alt tags, and there is no adverse effect to having them in your Outlook 2007 compatible email (other than the fact that they will not display,) so you can continue to include these in your emails if you wish.

• Table definitions - As we detailed above, Outlook 2007 renders HTML emails in Microsoft® Word, which is very sensitive to extra <tr> or <td> tags and does not adjust well to poorly sized tables. Previous Outlook versions would open emails in Internet Explorer, which is very forgiving of poor table definitions. You should ensure that your table definitions are correct and that the data you are placing inside the table fits properly within the defined table width.

You could do this, inside <td> where you want bg image place another table and do this .

<td> < !-- this is table where you want to set bg image -->
< table background="myimg.jpg"    style="background-repeat:no-repeat;" >
 here goes content
 </table>
 </td>

this will cover whole and it works perfectly in outlook

This worked for me:

<td background="http://www.thiespublishing.com/oneimage.gif" height="402" width="600" bgcolor="#cccccc">
<!--[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:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.thiespublishing.com/oneimage.gif"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:407px; width:610px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
<!-- This is where you nest a table with the content that will float over the image -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="402" valign="top">
Insert content here, including additional nested tables.
</td>
</tr>
</table>
<!-- This ends the nested table content -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>

Source: https://www.campaignmonitor.com/forums/topic/3862/please-test-this-outlook-20072010-background-image-solution/

Full width table cell background images

<html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style>
    v:* { behavior: url(#default#VML); display: inline-block; }
    </style>
    </head>
    <body>
        <center>
        <table width="100%" height="20">
            <tr>
                <td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                        <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
                    </v:rect>
                <![endif]-->
                </td>
            </tr>
            <tr>
                <td bgcolor="#33cc99">
                    <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                    <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                            <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
                        </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
        </center>
    </body>
</html>

• Tested in Outlook 2010 thru Windows 7 VMWare on OSX 10.9.2

Tiled full width table cell background images

    <html xmlns:v="urn:schemas-microsoft-com:vml">
        <head>
            <style>
                v:* { behavior: url(#default#VML); display: inline-block; }
            </style>
        </head>

        <body>

        <center>
        <table width="100%">
            <tr>
                <td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                    <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                            <v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
                        </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
        </center>

        </body>
    </html>

• Tested in Outlook 2010 thru Windows 7 VMWare on OSX 10.9.2

Specified width table cell background images

Here is an example, two rows, the first row has 3 columns with 3 separate background images, the second row spans all the way across as one background image.

    <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
            <td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
            <!--[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: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
            <td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
            <!--[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: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
            <td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
            <!--[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: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
        </tr>
    </table>
    <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
            <td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
            <!--[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: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; 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="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
        </tr>
    </table>

• Tested in Outlook 2010 thru Windows 7 VMWare on OSX 10.9.2