Tips

Making background images work in all email clients (Even Outlook 2010!)


A year ago you may have gone to an email designer and asked “why can’t you make this email look exactly like my website? Where are the animation effects, gradients and background images?” Any designer who has worked with email marketing design will know that emails have a lot more restrictions applied to them in comparison to web design.

One of the restrictions is outlook stripping out css from emails and not allowing background images to be displayed. There is now a fix for this which will change the way your corporate emails will look forever. Here is a quick step by step guide on how to make background images display in Outlook 2010:

 

1. Find the table block you want to put the background image on in your code.

Background image working in outlook

 

2. On the table tag add the code

background=”replace this with a link to your background image”

and add this code to the style:

background-position: 100% 50%; background-repeat: no-repeat;

Background image working in outlook

 

3. Under the table tag add this code snippet:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="frame" src="replace this with a link to your background image " color="#1d3117">
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->

This code works with the word processor code which html emails in outlook renders with.

Background image working in outlook

 

4. Make sure you replace the image src with your own background image.

Don’t forget to change the width code to fit your image. You can then add content within this table and it will appear above the image. This can be done using html or within the Wired Drag and Drop editor.

Background image working in outlook

If you would like us to create a fully responsive email template for you, please get in touch with us on 0845 467 5234 or Contact us here.

Tips
7 Tips to Avoid Shopping Cart Abandonment
Tips
What’s your working style?
Tech
Make online videos without spending a penny
There are currently no comments.