Bulletproof background images enlarging in Outlook

Merry Christmas firstly.

Secondly, I hope I'm not the only one still working away on client Christmas emails!
I love using the 'Bulletproof Background Images' you guys have set up. Its been a very welcome addition to pass on to our customers. I've even cobbled together a quick animated snow BG and whacked that behind a Xmas eFlyer etc. More happy elves.

Here's the issue. Why does Outlook enlarge the image on occasions? ....And, is there anything I can do about it. My festive Baubles are bleeding into my heading!! I've tried using a JPG and PNG. Same issue. Only Outlook 2010 enlarging the image. Images saved from Fireworks and 72PPI.

<td background="http://www.bigwavemedia.co.uk/ecampaign_bg/BG_600x490c.png" bgcolor="#7E0404" width="600" height="490" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:490px;">
    <v:fill type="tile" src="http://www.bigwavemedia.co.uk/ecampaign_bg/BG_600x490c.png" color="#7E0404" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="580" align="center" valign="middle">&nbsp;</td>
        <td width="20" align="center" valign="middle"><img src="shim_top20x120.gif" width="20" height="120" hspace="0" vspace="0" border="0" /></td>
      </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="580" align="right" valign="middle" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:35px; font-weight:normal; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px;"><singleline>Wishing you all a <br />
          very Merry Christmas <br />
          and a Prosperous <br />
          New Year!</singleline></td>
        <td width="20">&nbsp;</td>
      </tr>
    </table>
    <table width="20" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20" height="5" align="center" valign="middle"></td>
      </tr>
      <tr>
        <td width="20" height="5" align="center" valign="middle"></td>
      </tr>
      <tr>
        <td width="20" height="5" align="center" valign="middle"></td>
      </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="580" align="right" valign="middle" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px;">from us all</td>
        <td width="20">&nbsp;</td>
      </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="580" align="center" valign="middle">&nbsp;</td>
        <td width="20" align="center" valign="middle"><img src="shim_top20x120.gif" width="20" height="120" hspace="0" vspace="0" border="0" /></td>
      </tr>
    </table>
    </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>


Its the same as if you insert an image into Outlook and then reduced the width/height properties to 75% to have it display correctly.

Any help would be appreciated. Santa getting stressed now and want to get this ready before he leaves tomorrow.

davidaf davidaf, 2 years ago

Hi mailto_man. Would it be possible to share your entire HTML document so we can try to test in Outlook with the background image going into the header? You did mention that it's inconsistent: do you mean it's inconsistent on the same machine, or is it inconsistent across different machines with outlook installed?

I ask, because sometimes people will get enlarged images in Outlook due to having their Windows set to zoom at 150 or 200% - see http://bronto.com/blog/email-marketing-strategy/rendering-outlook-2007-uncovering-great-mystery#.UHiGkWl_URF for a great explanation of this. I have no idea if this is the issue in this case, but I thought I'd throw it out there.

Otherwise, it'd be great to see your full document to test with to see if we can replicate the problem :)


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

Thanks for the prompt reply. This is something I'm going to have to come back to. Had to amend the design slightly to have BG as an image and not a background as before.

I have changed the zoom setting and by holding CTRL and scrolling. Now cant remember what I had it at now, doh! It made no difference to the BG image though. Just scaled with the rest of the email. The other images display correct. Its just the background one.

The same issue applies to a previous job though. The BG displays as it should online and on mobiles, but is zoomed in for Outlook.

=============== HERE'S THE CODE  ===================
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style type="text/css">
/* MOBILES */
.block { border: 0px;}

/* BASE Style */
.w320             { padding:0px !important; margin:0px !important; -webkit-text-size-adjust: none; -ms-text-size-adjust: none;}
.w640             { padding:0px !important; margin:0px !important; -webkit-text-size-adjust: none; -ms-text-size-adjust: none;}
.ExternalClass     { width: 100%; display:block !important; }
body             {
    margin:0px;
    padding:0px;
    background:#999999;
    width:100% !important;
    background-color: #FFFFFF;
}
table, td         { border-collapse: collapse;}
a                 { font-weight:bold; text-decoration: none; color:#8177B6;}
a:active        { font-weight:bold; text-decoration: none; color:#8177B6;}

#footer a         { font-weight:normal; text-decoration: underline; color:#8177B6;}

p            { font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#333333; padding:0px; margin:0px;}

h1            { font-family: Tahoma, Geneva, sans-serif; font-size:50px; font-weight:normal; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#8177B6; padding:0px; margin:0px;}
h2            { font-family: Tahoma, Geneva, sans-serif; font-size:25px; font-weight:normal; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#8177B6; padding:0px; margin:0px;}
h3            { font-family: Tahoma, Geneva, sans-serif; font-size:16px; font-weight:normal; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#8177B6; padding:0px; margin:0px;}

#join            { font-family: Tahoma, Geneva, sans-serif; font-size:28px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px;}

#join a            { font-family: Tahoma, Geneva, sans-serif; font-size:28px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px; text-decoration:none}

#tel            { font-family: Tahoma, Geneva, sans-serif; font-size:28px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff !important; padding:0px; margin:0px; text-decoration:none !important}

#tel a            { font-family: Tahoma, Geneva, sans-serif; font-size:28px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff !important; padding:0px; margin:0px; text-decoration:none !important}

img {
    height: auto;
    line-height: 100%;
    outline: none;
    text-decoration: none;
    display: block;
    margin:0px;
    color: #696969;
}


</style>
</head>

<body>
<table id="background-table" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top">
    <table width="20" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="3"></td>
      </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="600" align="left" valign="top">
        <p style="color:#333333">
          Having trouble viewing this email? <webversion>Click here</webversion> to view online.
        </p></td>
      </tr>
    </table>
    <table width="20" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="3"></td>
      </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="600" align="left" valign="top" background="http://www.bigwavemedia.co.uk/ecampaign_bg/57378_bg.jpg" bgcolor="#D9DAD4">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
    <v:fill type="tile" src="http://www.bigwavemedia.co.uk/ecampaign_bg/57378_bg.jpg" color="#D9DAD4" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="600" align="left" valign="top"><img src="banner_600.gif" alt="Simply Gym gorseinon | LOST INCHES, KEEP YOUR POUNDS" width="600" height="197" hspace="0" vspace="0" border="0" /></td>
      </tr>
  </table>
    <table width="20" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
  </table>
    <table width="415" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="415" align="left" valign="top" bgcolor="#FFFFFF"><table width="20" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
        </table>
          <table width="410" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="50">&nbsp;</td>
              <td width="360" align="left" valign="top"><h2><singleline>Get fit with the amazing range of equipment at Simply Gym</singleline></h2></td>
            </tr>
          </table>
          <table width="20" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
          </table>
          <table width="410" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="50">&nbsp;</td>
              <td width="360" align="left" valign="top"><h1>for just <strong>£15.99 a month</strong></h1></td>
            </tr>
          </table>
          <table width="20" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
      </table></td>
      </tr>
    </table>
    <table width="20" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
    </table>
    <table width="380" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF"><table width="20" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
        </table>
          <table width="370" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="50">&nbsp;</td>
              <td width="320" align="left" valign="top"><h2><strong>Membership includes:</strong></h2></td>
            </tr>
          </table>
          <table width="20" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
          </table>
          <table width="370" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="50">&nbsp;</td>
              <td width="320" align="left" valign="top"><h3>&bull;&nbsp;&nbsp;Full use of 2 Simply Gym clubs<br />
&bull;&nbsp;&nbsp;Access to over 40 FREE classes a week<br />
&bull;&nbsp;&nbsp;Use of over 100 pieces of state-of-the-art equipment in each gym</h3></td>
            </tr>
          </table>
          <table width="20" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
          </table></td>
      </tr>
    </table>
    <table width="20" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="600" align="center" valign="middle" bgcolor="#8DC73F"><table width="20" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td width="20" height="5"></td>
          </tr>
        </table>
          <table width="580" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="580" align="center" valign="middle" id="join"><singleline>JOIN NOW <a href="http://www.simplygym.net/join">www.simplygym.net/join</a></singleline></td>
            </tr>
          </table>
          <table width="20" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="20" height="5"></td>
            </tr>
        </table></td>
      </tr>
    </table>
    <table width="20" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="20" height="5"></td>
      </tr>
      <tr>
        <td width="20" height="5"></td>
      </tr>
    </table>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
      </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="600" align="center" valign="middle" bgcolor="#4D4D4F"><table width="20" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
        </table>
          <table width="580" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="220" align="left" valign="middle"><table width="210" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="210" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin-bottom:10px;">Simply Gym gorseinon</span></td>
                </tr>
              </table>
                <table width="20" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td width="20" height="5"></td>
                  </tr>
                  <tr>
                    <td width="20" height="5"></td>
                  </tr>
                </table>
                <table width="210" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="210" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px;">Victoria Road, gorseinon,<br />
                Swansea, SA4 3AB</span></td>
                  </tr>
              </table>
                </td>
              <td width="360" align="left" valign="middle"><table width="360" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="40" align="left" valign="middle"><a href="http://www.facebook.com/simplygymswansea" target="_blank"><img src="fb_34.gif" width="34" height="34" hspace="0" vspace="0" border="0" /></a></td>
                  <td width="170" align="left" valign="middle"><span style="font-family: Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px;"><a href="http://www.facebook.com/simplygymswansea" style="font-family: Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px; text-decoration:none" target="_new">/SimplyGymSwansea</a></span></td>
                  <td width="40" align="left" valign="middle"><a href="http://www.twitter.com/simplygym" target="_blank"><img src="tw_34.gif" width="34" height="34" hspace="0" vspace="0" border="0" /></a></td>
                  <td align="left" valign="middle"><span style="font-family: Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px;"><a href="http://www.twitter.com/simplygym" style="font-family: Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; color:#ffffff; padding:0px; margin:0px; text-decoration:none" target="_new">/SimplyGym</a></span></td>
                </tr>
              </table>
                <table width="20" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td width="20" height="5"></td>
                  </tr>
                </table>
                <table width="360" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="360" align="left" valign="middle" id="tel">Tel: 01792 224 900</td>
                  </tr>
                </table></td>
            </tr>
          </table>
          <table width="20" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
        </table></td>
      </tr>
    </table>
    <table width="680" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="680" align="left" valign="middle"><table width="20" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
          <tr>
            <td width="20" height="5"></td>
          </tr>
        </table>
          <table width="560" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td width="560" align="left" valign="middle"><p style="color:#333333">
              <unsubscribe>Unsubscribe</unsubscribe>
              &nbsp;&nbsp;|&nbsp;&nbsp;
              <webversion>View email online</webversion>
            </p></td>
          </tr>
        </table>
          <table width="20" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
            <tr>
              <td width="20" height="5"></td>
            </tr>
          </table></td>
      </tr>
</table></td>
  </tr>
</table>
</body>
</html>

=============================================

No urgency anymore, but would be good to find out why its doing this.

Thanks,

Aaron


<argh! help="Still Stuck">Dam you Outlook</>

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