Outlook 2007 background image problem

Hello,

If anyone could trouble shoot this that would be great. I have used one of the templates provided to create a simple email design, but for some reason the background image gradient in Outlook 2007 won't sit properly. As shown below:

http://www.popcornbox.com/html_emails/popcorn/onthemove/problem.jpg

It should site centred to the email with grey each side... I haven't change the code too much from the template so I'm wondering why I'm getting this problem. I'm using the following CSS to call the background image:

body { 
   background-color: #fff;
   background-image: url('bg.jpg');
   background-position: top center;
   background-repeat: repeat-y no-repeat;
   margin: 0;
   padding: 0;
}

Here is a link to an online version of the email. Any help would be very much appreciated!

Roscoe

travisbell travisbell, 8 years ago

Hey Roscoe,

If you change the background-repeat to:

background-repeat: no-repeat repeat-y;

You'll be good to go.


--
Travis Bell
Roscoe, 8 years ago

Hey,

Thanks for your help. Although this hasn't sold the problem, still looks the same as the screen shot above.

Roscoe

travisbell travisbell, 8 years ago

Hey Roscoe,

Hmm... not sure what to say. I am assuming you're basing that off of the template #1 CSS. I just ran a test and everything looks good in Outlook 2007:

http://www.campaignmonitor.com/images/support/outlook-2007-20080909-113858.png

The CSS for that looks like so:

body { 
         background-color: #e6e6e6;
         background-image: url('bg.jpg');
         background-position: top center;
         background-repeat: no-repeat repeat-y;
         margin: 0;
         padding: 0;
      }

Here's a quick question, if you run a test email with template #1, does it work? Maybe different versions of Outlook '07 are causing discrepancies?


--
Travis Bell
Roscoe, 8 years ago

Thanks for your reply.

Hmmm, odd. I did use that template and just strip out the bits I didn't need. Would it have anything to do with importing the files from Safari on Mac? I'm using the Campaign Monitor testing tool and this is how it shows the gradient.

http://www.popcornbox.com/emailtesting/popcorn/onthemove/problem.jpg

I have to send another email from the template I made so I'll have a play and see if I can find a solution...

travisbell travisbell, 8 years ago

One thing to add, and make sure you've brought the styles inline.

http://www.campaignmonitor.com/images/support/inline-styles-20080910-151508.png


--
Travis Bell
BYGino, 8 years ago

I got the same problem but I just assumed that OL2007 didn't support background images. Actually I'm sure it's noted in the support chart but I could be wrong.

travisbell travisbell, 8 years ago

Hey,

It does but doesn't... see this blog post for what we're attempting.

The screen I posted was Outlook 2007 in Vista that has the background image (and repeat) working.


--
Travis Bell
Roscoe, 8 years ago

Thanks Travis Bell,

I am ticking the import inline styles button. I need to send another of these so will see if I have any luck.

travisbell travisbell, 8 years ago

Hey Roscoe,

I know what's going on now.

The image repeat *is* working in your example I bet. If you scroll to the bottom of the design & spam test you'll see the image still tiling at the bottom. What's happening though, is the background image isn't centering to the body so when windows are smaller than the complete width of the background, the primary table is being centered but the background isn't.

I never ran into this problem in my testing since I was always using Outlook full screen. The second I put it into windowed mode I noticed the same behavior.

In regards to getting it fixed... I'm not sure. I will have to play around some more.

Hope that helps.


--
Travis Bell

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