Email Newsletter Background Image (Hotmail & Outlook.com)

Hi,


I have just coded an email design, tested it in Litmus & found out the following errors:

Outlook.com: There was no background image for the newsletter. Outlook 2003-2011 works fine.

Hotmail: Similar is the case for hotmail as it also doesn't show up the background for the newsletter.

Here are the litmus results.

https://tahir.litmus.com/pub/c63439a

Thanks.

roshodgekiss roshodgekiss, 4 years ago

Hi there mtkahn, you may want to take a look at our CSS guide - the likely issue is that you're using the background-image CSS property, which is not supported in Hotmail/Outlook.com. A better bet is to use the HTML 'background' attribute (eg. background="tile.jpg"), which does work in this email client. Best of luck! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mtkhan mtkhan, 4 years ago

Thanks a lot roshodgekiss for your prompt reply. I have used HTML background also.
Here is the code.

https://html.litmus.com/email/?url=/sitevista/954ce400-492d-4cc5-af7a-ecbe5185f13a

Thanks,

Tahir

roshodgekiss roshodgekiss, 4 years ago

Hi Tahir, I took a look at your code and it turns out that background wasn't added as an HTML attribute. I replaced the <table width="100%"...> line of code with the following...

<table width="100%" border="0" cellspacing="0" cellpadding="0" background="http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/body_bg_.3.jpg" style="font-family:Arial, Helvetica, sans-serif;">

... and the background image displayed in Outlook.com. See: http://cl.ly/image/472o3R27312C

I also noticed there were multiple and sometimes conflicting body { ... } styles in <head>. Once these are eliminated, it's likely you will have far less troubles.

Thanks, Tahir! Excuse my folly here, but I noticed that you had coded up this template for Mailchimp - was there any reason why they could not assist you with this issue? Of course, we're always happy to :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mtkhan mtkhan, 4 years ago

Hi roshodgekiss, You've made my day, thanks a lot for the excellent tip. Worked like a charm. Here are the updated

screenshots:

https://tahir.litmus.com/pub/8aa1287

& the Code, please suggest if still any shortcomings in code:
https://html.litmus.com/email/?url=/sitevista/68a8a801-405b-4ac8-ae15-729cc5c95d06

Right now I'm using different background (image Block) for the text with width & height specified. Is it ok to leave height to auto so that it should adjust according to the contents & at the same time doesn't breakout in any of the email client. 

PS: Yeah it was coded for mailchimp, the reason why I posted it here is that I knew that the desired problem can be solved here with 100% results.

Personally I use CM, this was for a friend of mine who is using mailchimp for his email marketing, he has a design ready & wanted me to convert it for him to mailchimp template.


Thanks,

Tahir

roshodgekiss roshodgekiss, 4 years ago

Haha, no problem Tahir - I'm glad you're using our service :) Code looks good, albeit the CSS styles are fairly lengthy and I recommend removing "line-height:100%;" from img { ... } to prevent issues in Outlook 2000. As for  height: auto, I'm not sure how well this is supported in email clients and there's a good chance the image may become distorted. I'd be more likely to recommend just tiling the background image, if possible. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mtkhan mtkhan, 4 years ago

Hi Rosanne,

I'm facing some problem when I remove height from <td>background images, as those images are not tiled in outllok & I want them to repeat until the text ends. Right now the text is not visible after when it reaches the end of any image background which I want to repeat until the text ends.


Can you please suggest the remedy.

Thanks.

roshodgekiss roshodgekiss, 4 years ago

Hi Tahir, you may have better luck in Outlook using this solution. As mentioned:

To prevent the image from repeating, you can either match the background image dimensions to cell width and height, or replace <v:fill type="tile" with <v:fill type="frame" to resize the image to the dimensions defined in <v:rect>.

No promises this will work (setting static heights can be problematic, for one), but it's the best advice I can give, I'm sorry to say. Tiling the background image is definitely preferable in this situation.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mtkhan mtkhan, 4 years ago
roshodgekiss :

Hi Tahir, you may have better luck in Outlook using this solution. As mentioned:

To prevent the image from repeating, you can either match the background image dimensions to cell width and height, or replace <v:fill type="tile" with <v:fill type="frame" to resize the image to the dimensions defined in <v:rect>.

No promises this will work (setting static heights can be problematic, for one), but it's the best advice I can give, I'm sorry to say. Tiling the background image is definitely preferable in this situation.


Hi Rosanne,

This is what exactly I'm facing. My body text uses different background images, which I want to repeat but they are not repeating. Till now I have just checked it in outlook 2007.

I have removed the height from the background images which I want to repeat. But in outlook 2007 I can see the background in its original height, the text is also visible till there the remaining text is hidden under the next background block which should appear when the top finishes.

Here is the screenshot:
http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/Screenshot_2.png

roshodgekiss roshodgekiss, 4 years ago

Hey there Tahir, sadly, I couldn't see this screenshot, so I ran a test using the earlier code.

From what I can see from the content under the 'Hi!' banner, the issue here is that when applying a background to a table cell, the cell has to have a defined, fixed height in order to apply this technique. That's how I've applied it in the past, anyway.

The text content in this table cell is exceeding this fixed height, therefore giving it this truncated appearance.

Your best bet in this situation is to remove the background image from these text cells so they can adjust to fit the text content in Outlook. I'm aware that you're trying to go for a certain effect across all email clients, but I feel it may be pushing what is possible in Outlook, Gmail and other less flexible clients, I'm sorry to say.

I'm glad we got things working in Outlook.com, but I think we've met a true adversary in Outlook 2007+.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mtkhan mtkhan, 4 years ago

Hi Rosanne,

Thanks a lot for all of your help. I guess  I'll have to adjust the height of those background images according to the text if I want those background to stay.

I'm very much thankful for all of your efforts & help.

Thanks,

Tahir

roshodgekiss roshodgekiss, 4 years ago

Anytime, Tahir - we're always happy to help out :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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