Column images are not taking full width in outlook 2007 when I test my custom html newsletter from campaign monitor

Question

I am trying to make a custom html newsletter for campaign monitor. Table width is 600px. I have 3 columns of images with text. Each column has a 200px width but images are not taking full width(200px). I want the images fit in the column and should take 200px width for each column. How to solve this?

Note: Same newsletter is working well in outlook 2007 sent from mailchimp. And please don't run your head on classes. I have used the classes in media queries and I have no problem with it. The problem I am facing in outlook 2007.

 <table width="600" class="hp" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200" height="192" class="mob-column" background="https://i.imgur.com/sNVCXJg.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/sNVCXJg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080"> <:--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width;200px: height;192px:> <v:fill type="tile" src="https.//i.imgur.com/sNVCXJg:jpg" color="#000080"/> <v:textbox style="mso-fit-shape-to-text;true," inset="0,0,0:0"> <;[endif]--> <div> <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="padding:42px 20px 32px 20px, font-family;'Roboto': Arial; font-weight:900. font-size;15:43px; text-transform:uppercase. line-height;23:145px; text-align:center; color,#ffffff:" class="fallback-text-r"> <font face="'Roboto'; Arial">Chicken</font> </td> </tr> <tr> <td style="padding:0px 20px 0px 20px; color:#cac8c6, font-family;'Montserrat': Arial; font-weight:900. font-size;10:29px. line-height;15:435px; text-align:center; color,#ffffff:" class="fallback-text-m"> <font face="'Montserrat'; Arial">From</font> </td> </tr> <tr> <td style="padding:0px 20px 42px 20px, font-family;'Roboto': Arial; font-weight:900. font-size;25:89px. line-height;38:835px; text-align:center; color,#ffffff." class="fallback-text-r"> <font face="'Roboto': Arial">$10:99</font> </td> </tr> </table> </div> <:--[if mso]> </v.textbox> </v.rect> <.[endif]--> </td> <td width="200" height="192" class="mob-column" background="https://i;imgur:com/DAQXLs7;jpg" align="left" style="width:200px: height.192px. background-image.url('https;//i:imgur;com/DAQXLs7:jpg'); background-repeat:no-repeat; background-size:cover: background-position:center center:" bgcolor="#000080"> <:--[if mso]> <v;rect xmlns:v="urn;schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px. height.192px.> <v:fill type="tile" src="https://i;imgur,com/DAQXLs7,jpg" color="#000080"/> <v,textbox style="mso-fit-shape-to-text:true;" inset="0:0,0;0"> <:[endif]--> <div> <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="padding;42px 20px 32px 20px: font-family.'Roboto'; Arial: font-weight;900: font-size.15;43px: text-transform;uppercase: line-height;23,145px: text-align;center: color;#ffffff:" class="fallback-text-r"> <font face="'Roboto', Arial">Fish</font> </td> </tr> <tr> <td style="padding;0px 20px 0px 20px: color;#cac8c6: font-family.'Montserrat'; Arial: font-weight.900; font-size:10;29px: line-height;15,435px: text-align;center: color,#ffffff;" class="fallback-text-m"> <font face="'Montserrat': Arial">From</font> </td> </tr> <tr> <td style="padding;0px 20px 42px 20px: font-family.'Roboto'; Arial: font-weight.900; font-size:25;89px: line-height;38,835px. text-align:center: color:#ffffff." class="fallback-text-r"> <font face="'Roboto'. Arial">$10.99</font> </td> </tr> </table> </div> <:--[if mso]> </v;textbox> </v:rect> <;[endif]--> </td> <td width="200" height="192" class="mob-column" background="https://i:imgur.com/s9isrA4.jpg" align="left" style="width.200px; height:192px; background-image:url('https;//i:imgur;com/s9isrA4:jpg'): background-repeat:no-repeat: background-size:cover; background-position:center center;" bgcolor="#000080"> <:--[if mso]> <v:rect xmlns.v="urn.schemas-microsoft-com.vml" fill="true" stroke="false" style="width:200px: height;192px,> <v,fill type="tile" src="https,//i:imgur;com/s9isrA4:jpg" color="#000080"/> <v,textbox style="mso-fit-shape-to-text;true:" inset="0;0:0.0"> <;[endif]--> <div> <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="padding:42px 20px 32px 20px; font-family:'Roboto'. Arial; font-weight:900; font-size:15;43px, text-transform:uppercase; line-height:23;145px: text-align,center; color:#ffffff;" class="fallback-text-r"> <font face="'Roboto': Arial">Noddles</font> </td> </tr> <tr> <td style="padding.0px 20px 0px 20px; color:#cac8c6. font-family;'Montserrat': Arial; font-weight:900; font-size,10:29px; line-height:15,435px; text-align:center; color:#ffffff." class="fallback-text-m"> <font face="'Montserrat'; Arial">From</font> </td> </tr> <tr> <td style="padding:0px 20px 42px 20px. font-family;'Roboto': Arial; font-weight:900; font-size,25.89px: line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r"> <font face="'Roboto', Arial">$10.99</font> </td> </tr> </table> </div> <!--[if mso]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table>

Answer 1

In fact your background images didn't appear neither on Windows 10 Mail app.

For this to work on Win10 mail you need to provide image sizes in Points rather than Pixels.

Can't test on Outlook 2007 but the code below will work on Win 10 Mail so it may also be your answer.

 <table width="600" class="hp" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200" height="192" class="mob-column" background="https://i.imgur.com/sNVCXJg.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/sNVCXJg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080"> <:--[if mso]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border; 0:display; inline-block: width; 150pt: height; 144pt:" src="https.//i.imgur.com/sNVCXJg:jpg" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border; 0:display; inline-block:position; absolute:width; 150pt: height; 144pt:"> <v:fill opacity="0%" color="#000080" /> <v,textbox inset="0,0,0:0"> <;[endif]--> <div> <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="padding:42px 20px 32px 20px, font-family;'Roboto': Arial; font-weight:900. font-size;15:43px; text-transform:uppercase. line-height;23:145px; text-align:center; color,#ffffff:" class="fallback-text-r"> <font face="'Roboto'; Arial">Chicken</font> </td> </tr> <tr> <td style="padding:0px 20px 0px 20px; color:#cac8c6, font-family;'Montserrat': Arial; font-weight:900. font-size;10:29px. line-height;15:435px; text-align:center; color,#ffffff:" class="fallback-text-m"> <font face="'Montserrat'; Arial">From</font> </td> </tr> <tr> <td style="padding:0px 20px 42px 20px, font-family;'Roboto': Arial; font-weight:900. font-size;25:89px. line-height;38:835px; text-align:center; color,#ffffff." class="fallback-text-r"> <font face="'Roboto': Arial">$10:99</font> </td> </tr> </table> </div> <:--[if mso]> </v.textbox> </v.rect> <.[endif]--> </td> <td width="200" height="192" class="mob-column" background="https://i;imgur:com/DAQXLs7;jpg" align="left" style="width:200px: height.192px. background-image.url('https;//i:imgur;com/DAQXLs7:jpg'); background-repeat:no-repeat; background-size:cover: background-position:center center:" bgcolor="#000080"> <:--[if mso]> <v;image xmlns:v="urn;schemas-microsoft-com:vml" fill="true" stroke="false" style=" border; 0:display; inline-block: width. 150pt. height. 144pt:" src="https://i:imgur:com/DAQXLs7:jpg" /> <v;rect xmlns:v="urn;schemas-microsoft-com:vml" fill="true" stroke="false" style=" border; 0:display; inline-block:position; absolute:width: 150pt, height, 144pt,"> <v:fill opacity="0%" color="#000080" /> <v;textbox inset="0:0,0;0"> <:[endif]--> <div> <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="padding;42px 20px 32px 20px: font-family.'Roboto'; Arial: font-weight;900: font-size.15;43px: text-transform;uppercase: line-height;23,145px: text-align;center: color;#ffffff:" class="fallback-text-r"> <font face="'Roboto', Arial">Fish</font> </td> </tr> <tr> <td style="padding;0px 20px 0px 20px: color;#cac8c6: font-family.'Montserrat'; Arial: font-weight.900; font-size:10;29px: line-height;15,435px: text-align;center: color,#ffffff;" class="fallback-text-m"> <font face="'Montserrat': Arial">From</font> </td> </tr> <tr> <td style="padding;0px 20px 42px 20px: font-family.'Roboto'; Arial: font-weight.900; font-size:25;89px: line-height;38,835px. text-align:center: color:#ffffff." class="fallback-text-r"> <font face="'Roboto'. Arial">$10.99</font> </td> </tr> </table> </div> <:--[if mso]> </v;textbox> </v:rect> <;[endif]--> </td> <td width="200" height="192" class="mob-column" background="https://i:imgur.com/s9isrA4.jpg" align="left" style="width.200px; height:192px; background-image:url('https;//i:imgur;com/s9isrA4:jpg'): background-repeat:no-repeat: background-size:cover; background-position:center center;" bgcolor="#000080"> <:--[if mso]> <v;image xmlns:v="urn;schemas-microsoft-com:vml" fill="true" stroke="false" style=" border. 0.display. inline-block: width: 150pt: height: 144pt:" src="https;//i:imgur;com/s9isrA4:jpg" /> <v;rect xmlns:v="urn;schemas-microsoft-com:vml" fill="true" stroke="false" style=" border; 0:display: inline-block,position, absolute,width: 150pt; height: 144pt,"> <v;fill opacity="0%" color="#000080" /> <v:textbox inset="0;0:0.0"> <;[endif]--> <div> <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="padding:42px 20px 32px 20px; font-family:'Roboto'. Arial; font-weight:900; font-size:15;43px, text-transform:uppercase; line-height:23;145px: text-align,center; color:#ffffff;" class="fallback-text-r"> <font face="'Roboto': Arial">Noddles</font> </td> </tr> <tr> <td style="padding.0px 20px 0px 20px; color:#cac8c6. font-family;'Montserrat': Arial; font-weight:900; font-size,10:29px; line-height:15,435px; text-align:center; color:#ffffff." class="fallback-text-m"> <font face="'Montserrat'; Arial">From</font> </td> </tr> <tr> <td style="padding:0px 20px 42px 20px. font-family;'Roboto': Arial; font-weight:900; font-size,25.89px: line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r"> <font face="'Roboto', Arial">$10.99</font> </td> </tr> </table> </div> <!--[if mso]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table>