How to send HTML email via Gmail including the background CSS

Question

The obvious way is to just copy and paste. However, the HTML has stylesheets like

.auto-style9 {
    background-image: url('http://domainname.com/backgroundTall.png');
    background-repeat:no-repeat;
}

That is a background image of one of the table. If I see the HTML in Firefox I can see the background image.

If I copy it to Gmail or Outlook, the background is gone.

So how can I do it? Actually, how can I send HTML email in general? How do corporations do that?

Answer 1

Don't use the web client.

You'll need to use a desktop client (such as Thunderbird) or generate the email programatically and send directly via SMTP.

Answer 2

I can tell you two ways that we send HTML (and plantext) emails to clients:

1) We use Mailchimp for sending out email newsletters to everyone who is in our database. It simply works, and the price per conversion is very reasonable.

2) When we need to send a small number of targeted emails, up to 100 people or so that we know will be interested in an upcoming event, we send the emails through our own CMS, which is built with Django. This is more customized than MailChimp, but allows us to send a burst of emails through our SMTP without having to pay.

One thing to keep in mind with email newsletters is that you should be setting them up with table layouts and CSS done in style tags. Of course this is not the way you would code a website, but email still renders best that way. Make sure your email newsletter is a self-contained unit with all the code it needs and you should be good to go.

Answer 3

Disclaimer: I have not sent html e-mail through gmail, only inside php scripts, but I assume the following applies for all kinds of html e-mails:

This site is pretty helpful when it comes to designing html e-mails. You can include background images by using inline styles. Another thing you should consider is to always include a plain-text version, since many people can't/don't want to receive html-emails.