Background-image css inside an html email - Gmail

问题:

i want to send html body email like below with background-image css to my users :

<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
    My Content
</div>

but as the link below says google does not support background-image css!
http://www.campaignmonitor.com/css/

what can i do about that ?

回答1:

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>

回答2:

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

回答3:

I tested on gmail: gmail will remove background-color=#FFFFFF with "background-image", it's weird.

"background" works, so convert background-color and background-image to "background" in style.

"background-color"=#FEFEFE works too

tested on 2013-09-10