The trick to working background images.

Standard

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:

Broken Background

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]>
<style type="text/css">

body {

background-image: url('YOURLINK');
background-repeat: repeat-y no-repeat;
background-position: top left;
background-color: #HEXCODE;
background-attachment: scroll !important;
margin-top:0;
padding:0;

}
</style>
<![endif]-->

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!

Working background image

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.

In conclusion

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s