Monday, 21 November 2011, 12:47 AM

Background Pictures and Hotmail

Hopingly you all know that we regularly produce a newsletter. Being e-mail nerds, Sarah and I code our newsletters ourselves.

But there’s always something that malfunctions – and last time it was Hotmail.

We have a big background picture which, in fact, works in most e-mails clients: Mac, Gmail, Hotmail, Outlook for PC a.s.o.

You fix a background that works almost everywhere by specifying the back ground picture twice in the coding. Once in ”BODY” and once in an enclosing html-table.

This is how you do it in ”BODY”:

<body background=”http://www.nordicecommerceknowledge.se/ebrev/ebrev-bg1.jpg”>

And in the enclosing html-table:

<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″ align=”center” background=”http://www.nordicecommerceknowledge.se/ebrev/ebrev-bg1.jpg”>

But – it was cut off in Hotmail. The problem with Hotmail is that it only does the background, regardless if it’s a background picture or a background color, as wide as the content is wide. This results in two things: white spaces in the margins and the newsletter is aligned left. Not very trim…

After seven attempts we finally got it right. You have to overwrite Hotmail’s rules for content viewing – which is done with a little CSS-coding at the top of the mail.

Like this:

<style type=”text/css”>
.ReadMsgBody
{width:100%;}
.ExternalClass
{width:100%;}
</style>

Now, see the difference and how nicely the background is showing:

If you want our (Swedish) newsletter you are welcome to register for it at this address:

www.nordicecommerceknowledge.se