Backgrounds and the issues with them
When I first started making emails I was told categorically that we can’t use background images. It just wasn’t possible. Until one day I stumbled upon this blog by Elliot Ross which shows you how to get full screen wallpaper style background images working in all clients.
Perfect right?! Wrong!
The issue then comes with Outlook 2007 and 2012 which both choose to add a 15 pixel piece of padding at the top of their emails. This means that when you create your beautiful background image that looks all lovely and jazzy your actual content will sit 15 pixels below the background image, potentially ruining the design like so:
A fix, you say?
There is, however, an easy way to work around this which only requires a little extra effort on your part!
When saving your background image, move it down 15 pixels and save a second copy. You then add this snippet of code into your head tag:
<!--[if gte mso 9]>
background-repeat: repeat-y no-repeat;
background-position: top left;
background-attachment: scroll !important;
This will tell your email to open up the background with the 15 pixel “buffer” at the top if viewed in Outlook 2007 or 2010. You’ll also notice that we have to set it to repeat on the y axis. If you do not set this, your background image will not load. Now, here’s the picture with the email working as it should!
Things to remember when picking a background image for your email
Test, test and test again! – Test it on email-testing software such as Litmus or Email on Acid. Test it with test emails. Get a colleague to test it. I can’t stress this point enough!
Play it simple – Simplicity can be beautiful, background images in emails work best with a small texture or basic graphic. If you start to design a fancy 3D background with all the works on it remember to think about issues such as. Will the user see this in all it’s glory on a smaller screen? How will this look in the preview pane? etc.
Loading times – Wow, that’s an amazing background! However, does it take 20 seconds to load? If so, you’re not onto a winner there.
I’d love to hear about your experiences with background images and your thoughts on any points I’ve raised. I will read and respond to all comments.