We’ve noticed a few people having issues with background images in their HTML email designs, so we thought we’d post some quick tips here.
Lots of email applications (especially the browser-based ones, like Yahoo!Mail, Hotmail and Gmail) strip out your <HTML>, <HEAD> and <BODY> tags. It kinda makes sense, if you think about it. They’re displaying your email inside their web page. They don’t want your page settings (like background colors, files, CSS, etc) to interfere with their overall interface. So they strip it all out.
That means you’ll kinda have to rig your HTML email to make certain things work…
Background Images and colors in HTML Email
If you want to set a background image or color in your HTML email, you can set it in your BODY tag, where it usually goes. That’ll work ok for some desktop email applications, like Microsoft Outlook.
But to make it work across more email applications, you need to “rig” your code so that your entire email is set inside a big TABLE WRAP. Just set a big table that’s 100% wide, then specify your background color and image there. We recommend doing it the old-fashioned “bgcolor” or “background=”" way. If you prefer doing it with CSS, be sure to read the “CSS” tips below. As with all images in HTML email, they need to be hosted on your server, and you need to point to them with absolute (not relative) paths.
Once you’ve created the big TABLE WRAP with your background color or image, place your actual newsletter code inside, and you’re good to go.
If you’re a very experienced web designer, this will no doubt make you feel dirty, and make you want to take a shower immediately afterwards. But HTML email isn’t as reliable as web pages are (yet) and there are way too many email apps out there that display HTML differently. Until all the various email apps get a little more consistent, you’re going to have to get used to “rigs” like this.
CSS in HTML Email
There are all sorts of “CSS tips and tricks for HTML email.” But the main thing to remember is that the <HEAD> and <BODY> tags get stripped when HTML email is displayed in browser based applications. So that means you can’t link to an external CSS file from the <HEAD> portion of your email. You’ll need to use embedded or inline CSS in HTML email instead. And, if you take the embedded approach, be sure to place all your code BELOW the <BODY> tag. Place it just above your content. Feels dirty, I know. But it’s the only way to get CSS to work (reliably) in email.
Periods = “Stop Email!”
If you start any line in your email with a “period,” some email servers interpret that as “end of message” and they’ll stop it right there. D’oh! So this affects how you need to code your CSS. When you embed your CSS, be careful with the little “dots” or “periods” that are used to define styles. If you start your line of CSS with “.header” for instance, that’s exactly where some email servers will cut your message off. So in your CSS, add a space before every single line that starts with a period.
It’s not just a CSS thing. It’s any line that starts with a period (see our previous post). But the CSS portion of your email is more likely to have lines that start with periods, so it’s good to mention it here.
Want some more tips on HTML email coding and design? Try our free PDF.
Good reference post. One of my clients was working with css and had external and internal css, but Gmail was parsing it terribly. I did some research and found this: http://www.xavierfrenette.com/articles/css-support-in-webmail/. I took my client’s newsletter (filled with span classes and other) and did all of the css inline (had to add a few p tags here and there). It worked perfectly in Gmail and Hotmail thus far.
So an example of inline css can be found here:
http://www.tizag.com/cssT/inline.php
you can do this on lots of (I believe actually all) html elements.
Let me know if you have any questions.
Mike
http://www.netexperienced.com
love this site. I was wondering how to add a background image when testing emails in outlook. I usually set up a large table with a bg image then put my content within a table inside that. Only thing is we develop to about 600-650 px width. So I can’t have a large bg image 100% of the window. when I test on a pc and copy from mozilla the bg images don’t get copied-so it’s hard to tell if something quirky happens. funny though i just learned the value of CSS but started doing more emails lately at work and now that i have a taste for the div….man i don’t want to go back to tables! any suggestions would be greatly appreiciated!
Sorry, but this is a pretty old post here.
Background images really aren’t safe to use in HTML emails.
Outlook used to be one of the few email programs that would actually render them, but with Outlook 2007 using Word to render emails, that’s going away soon.
You can still try pulling in background images (are you using absolute paths in your code, and uploading the background image to your server?), but be sure you design it to fail gracefully. Give your table a background color that matches the background image as close as possible. Expect the majority of email programs out there to not render your bg image.
In terms of CSS support in HTML email, the only “safe” way to use it these days is inline CSS.
Ive been looking for the answer to this for a while now, thanks.
Just an update – if you’d like to test your HTML email (and your CSS), you can use MailChimp’s Inbox Inspector:
http://blog.mailchimp.com/add-ons/inboxinspector/
Copy-paste your code, and we’ll screenshot it in all the major email programs, and we’ll also tell you if you’ll pass/fail the major spam filters and firewalls.
Can you tell us which email programs support bg images within a table and which ones don’t? That would be very helpful.
We used the inbox inspector:
http://blog.mailchimp.com/inboxinspector/
to do a quick check.
Outlook and Gmail were the 2 major ones that choked on background images. I wouldn’t be surprised if more apps out there didn’t support bg images, but we didn’t do an exhaustive search.
The truth is, we just *always* design things to be fail-safe, because we assume it’s *always* going to break. Sigh. Welcome to our hell.
So if you wanna display images? is it best to use img src? and not background?
In general, using background is not that safe for rendering in email readers.
Well i think background image is not safe but if one has to use it then one should also put some background colour just to be on the safe side. I had to do it in one of my projects which had a radial gradient background image at the footer. I also kept a similar background colour in the table cell. In yahoo and thunderbird it showed perfectly fine but the image wasn’t loading in Gmail. Here the background colour was showing fine..
@Ben oops sorry I just read that you have posted a similar thing above lol
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
[...] Background Images and CSS in HTML Email Some tips on using background images in HTML email. [...]
Hi,
I downloaded a free template here http://blog.mailchimp.com/resources/html_email_templates/
but when I place the exact code into my email program in this case it’s (osCommerce) to send to customers and send it to myself in Outlook, there is a large white gap on the top of the email. Plus a bunch of breaks throughout the newsletter. Everything is spread out it seems. The css is fine at least. Could this be osCommerce issue?
Thanks,
Dave
Dave – Unfortunately, it could be a million different things. That’s one of the challenges to email marketing, and offering support for email marketing. You’ll need to send a copy of the email, plus details about your email application that you used to display it, to help @ mailchimp in order to get a proper diagnosis.
Resorting to table works at least in Gmail. Thanks for the info.
I have the same problem in newsletter html, the background are not shown in outlook and other email programms, please suggest what the 100% good solution to show the background images in the html newsletter. thanks
I followed your steps but cant get the desired output. I made a simple template using tables and I applied bg image. When I use tag the image is displayed but if I apply it as its not working. I dont understand what and where the problem is ????
this solves my longtime problem of background image issues in mailers. great stuff! thanks
Hi,
I am having an issue with outlook and a HTML email I am tryiong to send out.
When I view the email in IE8, everything looks normal. However, as soon as I ‘send it as an email’ and preview it before it goes, the background disapears. I have tried so many options to remove this problem but to no avail – any ideas?
Please see below for my code:
Newsletter
@Fran: you didn’t read this page at all, did you???
I’m working on a client’s newsletter and they would like to have their left sidebar filled with a gray gradient that fades from dark to light, left to right. That same sidebar will also contain text content and small images. However, as far as I know, gradients are poorly supported across email clients. Thoughts? Thanks!
@Conrad Corpus says:
The problem is that since the launch of Outlook 2007 there is no support for background-image or -url support when creating the email format so you are right in saying that many different mail clients will display this differently.
very useful thx
Hello All I am facing problem in Email Template
Background image is not showing in outlook 2007 please help me if any one know…
The Outlook 2007/2010 background image fix: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862
You can make background image work using redundant method as below. It works on all the email clients I could test on including outlook2007. Hope this helps.
1. Create a “div” wrapper with the image background.
2. Create a content container, such as “table”, with the same image background using both “background” and “style” properties.
Example:
-div style=”width:100%;background:#42386d url(‘http://fullimagepath’) repeat;margin:0px;”
-table width=”697″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ background=”http://fullimagepath” style=”width:100%;background:#42386d url(‘http://fullimagepath’) repeat;”
I am failed to use my own template with background.
At first i downloaded the templates friom mailchimp as a zip file. then i choose one template and edit it. i have just used a background image.
my project folder is web1. it has two sub file-> template.html and a golder images. the images folder contains the bg image.
in template css i wrote:
#backgroundTable{
background-color:#fff2db;
background-image:url(‘bei_bodybg.png’);
background-repeat:repeat-x;
}
then i zipped the main folder and uploaded it following mailchimp instructions. locally it works nice. but on mailchipm the image is not found.
pls help me about it. i want upload my full template with images.
Instead of background-image:url(‘bei_bodybg.png’); you should specify the locations of the image by a full path name. Something like:
background-image:url(‘http://mywebsite.com/bei_bodybg.png’); and of course you must replace ‘mywebsite.com’ by your website domain.
Mail.app renders backgrounds, Gmail renders backgrounds if allowed. I’d like to see more image integration as more browsers allow or at least seem to permit more. There is no real media viewer/editor/uploader outside of adding images to posts.
* Add a Media manager tab for quicker CRUD tasks.
* Add a way in the Editor/Code UI to upload an image
* Allow images with HTML import uploads (zip it or such)
Some ideas for furthering the integrations. Not all need be met to make things more fluid.
I’d suggest not using Michael’s solution with inline css as it breaks.
Thanks for this article. I had an HTML DIV-based email with inline CSS defining the background, which worked for Gmail but not for Hotmail. Switched to “table” and the old-school background tags and everything works as expected.
NOTE: inline CSS ‘color’ attribute works for divs. the div “align” attribute works as well. (Tested in Gmail and Hotmail)
Here you can get an example of the template I set up for my site:
http://odstartillery.com/es/@/translate/admin_welcome_inactive/
Look at the code. It may suck, but it works lol.
Hi there, i have tried this in one of my HTML Emails, but it didn’t work for me. any suggestions?
Code is as follows:
div,
p,
a,
li,
td
{ -webkit-text-size-adjust:none; }
Thank you in advance.
Hi there, I’m not entirely sure what you’re shooting for with the above bit of code, but I’d recommend checking out our inbox inspector to see how your emails appear in other email clients. FWIW, if this code is specifically in reference to background images we just don’t recommend using them anymore because they are so poorly supported. The following is a link to a very old blog post as well, http://eepurl.com/p63sv but it gives you some insight as to why you might not want to use them in your email campaigns.