Bullet Proof background generator width question

Hi guys sorry if this has been asked before,

I noticed if i use a width of 163 px and height of 167px the background image does not at all render properly in 2007 2010 and 2013.

basically I have two col left with text and right I am using a background image with some text in it.

<!-- right -->
                                <table cellpadding="0" cellspacing="0" border="0" width="163" class="align-center-mobile" align="right" style="mso-table-lspace:0;mso-table-rspace:0;">
                                    <tr>
                                        <!-- css background image with real variable -->
                                        <td background="http://cdn2.hubspot.net/hub/395370/file-1945865597-jpg/images/email-img/30-day-clip_VAR.jpg" bgcolor="#7bceeb" width="163" height="167" valign="top" align="left" valign="top" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0; padding-left:0; mso-table-lspace:0;mso-table-rspace:0;">
                                          <!--[if gte mso 9]>
                                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:163px;height:167px;">
                                            <v:fill type="tile" src="http://cdn2.hubspot.net/hub/395370/file-1945865597-jpg/images/email-img/30-day-clip_VAR.jpg" color="#7bceeb" />
                                            <v:textbox inset="0,0,0,0">
                                          <![endif]-->
                                          <table cellpadding="0" cellspacing="0" border="0" width="163" class="align-center-mobile" align="center" style="mso-table-lspace:0;mso-table-rspace:0;">
                                              <tr>
                                                  <td valign="top" align="center" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0; padding-left:0; mso-table-lspace:0;mso-table-rspace:0; font-family: Arial, Helvetica, sans-serif; font-size:75px; line-height:75px; font-weight: bold; color:#ffffff;">

                                                    30
                                                       
                                                   
                                                  </td>
                                              </tr>
                                          </table>
                                          <!--[if gte mso 9]>
                                            </v:textbox>
                                          </v:rect>
                                          <![endif]-->
                                        </td>

                                    </tr>
                                </table>
                                <!-- /right -->

I notice on my other email projects where I used background images if the widths are more than 300 px they render perfectly in outlook. Has anyone faced this issue or is there any fix for it?

Stig Stig, 2 years ago

Hey tahsin,

Thanks for posting the code here – happy to have a look at it!

It looks like this might actually be happening because Outlook 2007/2010/2013 can be pretty particular about images being saved in 96 dpi.

If you try this copy of the image instead, that should display at the right size in Outlook.

Alternatively, you can chance

<v:fill type="tile"

to

<v:fill type="frame"

and Outlook will stretch the image to fit the size of the rectangle.

Looking at the design though, it looks like you should be able to get away with skipping the background image altogether. By slicing the image around the text, and place each piece in a separate table cell, you can simply code the number on top of a solid #20b6e9 background color (no VML).

Definitely worth considering real text for the rest of the text too, instead of placing text in an image which can get blocked or might fail to download when the email is being read.

Hope that helps you get things working! Definitely post back here if you have any further questions.


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

Stig thank you so much! it works with
<v:fill type="frame"

I didnt want to go the other way of slicing it up but with my earlier code I played a cheat with the image on photoshop and set the width with white space on the left and added 2 td and it rendered well on outlook as well but I definitely will use the <v:fill type="frame" from now on.

Thanks again really appreciate it!


Tahsin
Stig Stig, 2 years ago

Hei Tahsin,

Thanks for posting back here – great to hear that did the trick :)


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

Hello Stig,

Sorry to bother you but I am having issue on another bg image project. This is my code.

<table cellpadding="0" cellspacing="0" border="0" width="566" align="center" class="expand-container" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;">
                        <!-- header logo row -->
                        <tr>
                            <td align="left" valign="top" style="margin: 0 0 0 0;padding: 22px 22px 22px 22px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: arial, sans-serif, helvetica;font-size: 12px;line-height: 17px;color: #58595b;" bgcolor="#d4df4d" class="mobile-reset-padding">
                                <!-- table logo header -->
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;">
                                    <tr>
                                        <td align="left" valign="top" style="margin: 0 0 0 0;padding: 0 0 10px 0;border-bottom: 5px solid #000000;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: arial, sans-serif, helvetica;font-size: 12px;line-height: 17px;color: #58595b;">
                                            
                                        </td>
                                    </tr>
                                    <tr>
                                        <td background="http://cdn2.hubspot.net/hub/446770/file-2071794632-jpg/email/nov-black-black-bar.jpg" bgcolor="#d4df4d" width="521" valign="top">
                                          <!--[if gte mso 9]>
                                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:521px;">
                                            <v:fill type="tile" src="http://cdn2.hubspot.net/hub/446770/file-2071794632-jpg/email/nov-black-black-bar.jpg" color="#d4df4d" />
                                            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                          <![endif]-->
                                          
                                           <table cellpadding="0" cellspacing="0" border="0" width="100%" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;">
                                              <tr>
                                                  <td valign="top" align="left"  style="margin: 0 0 0 0;padding: 0 0 0 0;font-size: 26px;line-height: 42px;text-decoration: none;font-weight: bold;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: arial, sans-serif, helvetica; color: black;  mso-line-height-rule:exactly; mso-line-height-alt:40px;">
                                                      Christopher, this card makes a great gift. And not just because it’s free. 
                                                  </td>
                                              </tr>
                                          </table>
                                          <!--[if gte mso 9]>
                                            </v:textbox>
                                          </v:rect>
                                          <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <!-- header logo row -->
                        
                    </table>

http://s10.postimg.org/ravceyv5h/padding.jpg

I created this border bottom line as a background image so the text looks like it is styled as in text-underline. Since text decoration is imposissible to style I used this method everything works great but the problem is in outlook 2007, 2010 and 2013 there is an extra spacing I am getting at the bottom of my container and I just for the life of me cant figure it out.

If I use the height property code

<tr>
                                        <td background="http://image.s6.exacttarget.com/lib/fe95137075640c7b70/m/2/nov-black-black-bar-final.jpg" bgcolor="#d4df4d" width="521" height="84" valign="top">
                                            <!--[if gte mso 9]>
                                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:521px;height:84px;">
                                            <v:fill type="tile" src="http://image.s6.exacttarget.com/lib/fe95137075640c7b70/m/2/nov-black-black-bar-final.jpg" color="#d4df4d" />
                                            <v:textbox inset="0,0,0,0">
                                            <![endif]-->
                                    
                                           <table cellpadding="0" cellspacing="0" border="0" width="100%" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;">
                                              <tr>
                                                  <td valign="top" align="left"  style="margin: 0 0 0 0;padding: 0 0 0 0;font-size: 26px;line-height: 42px;text-decoration: none;font-weight: bold;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: arial, sans-serif, helvetica; color: black;  mso-line-height-rule:exactly; mso-line-height-alt:40px;">
                                                      %%FSTNAM%%, this card makes a great gift. And not just because it’s free. 
                                                  </td>
                                              </tr>
                                          </table>
                                          <!--[if gte mso 9]>
                                            </v:textbox>
                                          </v:rect>
                                          <![endif]-->
                                        </td>
                                    </tr>

Then the extra gap is gone but thing is if the content extend more than the heght it gets cut off like overflow hidden in outlook 2007 2010 and 13 and the name part is going to be a variable for a campaign i am working on and yeah if someone with a big name well....:p


Tahsin
Stig Stig, 2 years ago

Hey Tahsin,

No worries at all. This sounds very similar to an issue that was discussed over at Microsoft's forums here:

Outlook 2007/2010 - Inserting table into autoshape leaves extra space

To quote Microsoft support,

Word is basically a paragraph-centric application in terms of how it handles formatting and document components. There always needs to be one paragraph in a document and a table will always have a paragraph associated with it. In this case, since Word is converting the HTML into Word-style formatting in the user interface, there will always be that paragraph mark that gets added after the table.

The workaround that worked in that case, was to insert the line

<p style="margin:0;mso-hide:all;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>

right before the end of the textbox. So in your code, that would look like this:

                    <table cellpadding="0" cellspacing="0" border="0" width="566" align="center" class="expand-container" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;">
                        <!-- header logo row -->
                        <tr>
                            <td align="left" valign="top" style="margin: 0 0 0 0;padding: 22px 22px 22px 22px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: arial, sans-serif, helvetica;font-size: 12px;line-height: 17px;color: #58595b;" bgcolor="#d4df4d" class="mobile-reset-padding">
                                <!-- table logo header -->
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;">
                                    <tr>
                                        <td align="left" valign="top" style="margin: 0 0 0 0;padding: 0 0 10px 0;border-bottom: 5px solid #000000;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: arial, sans-serif, helvetica;font-size: 12px;line-height: 17px;color: #58595b;">
                                            
                                        </td>
                                    </tr>
                                    <tr>
                                        <td background="http://cdn2.hubspot.net/hub/446770/file-2071794632-jpg/email/nov-black-black-bar.jpg" bgcolor="#d4df4d" width="521" valign="top">
                                          <!--[if gte mso 9]>
                                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:521px;">
                                            <v:fill type="tile" src="http://cdn2.hubspot.net/hub/446770/file-2071794632-jpg/email/nov-black-black-bar.jpg" color="#d4df4d" />
                                            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                          <![endif]-->
                                          
                                           <table cellpadding="0" cellspacing="0" border="0" width="100%" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-collapse: collapse !important;">
                                              <tr>
                                                  <td valign="top" align="left"  style="margin: 0 0 0 0;padding: 0 0 0 0;font-size: 26px;line-height: 42px;text-decoration: none;font-weight: bold;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: arial, sans-serif, helvetica; color: black;  mso-line-height-rule:exactly; mso-line-height-alt:40px;">
                                                      Christopher, this card makes a great gift. And not just because it’s free. 
                                                  </td>
                                              </tr>
                                          </table>
                                          <!--[if gte mso 9]>
                                            <p style="margin:0;mso-hide:all;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
                                            </v:textbox>
                                          </v:rect>
                                          <![endif]-->
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <!-- header logo row -->
                        
                    </table>

Hope that gets rid of the unwanted gap for you :)


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

Stig I owe you a beer! Thanks again! Is there any resource sites where I can dig up more on this outlook 2007 - 13 codes like the one you added.

Thanks again your a life saviour!


Tahsin

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