Background-image css inside an html email - Gmail does not support

Update as of 2019. While there are issues with adding background image from inline image on the email (at least I did not find a way to make it work). Actually css-background image works fine on at least some elements as long as they are absolute urls to resource, my snippet that works on gmail as of June 2019:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">

This makes me wonder why it didn't work for the author. I have few theories:

a) back then it didn't work

b) it does not work on div elements

c) link was broken

d) missing single quotation mark

e) single and not double quotation mark around attribute style

f) despite the width and height on style, div was of 0x0 size

(Some of those above sound stupid)

You can't do anything about it. Using CSS to set background image is not supported in many web-mail application because of security reasons.

The only way to actually show background behind text is to create an image with text on it and display it using <img src="##" /> tag. Though, always remember to add link to text version of your email and/or link to web-page based copy of your newsletter.

Additoinally, you need to remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc.

Check out this page for few good suggestions: http://www.sitepoint.com/code-html-email-newsletters/

Also MailChip (probably most popular Newsletter management system) has few very good suggestions on how to code HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails

Have you tried setting the background attribute of a table?

This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.

Example (Tested in Gmail)

    <table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
        <tr>
            <td>
                Email Content...
            </td>
        </tr>
    </table>