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

Question

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?

Bowel

Please don't put tags in the title. Also, this has nothing to do with ASP.Net. – Gagne

there really is nothing you can do since positon and z-index are not supported by gmail either – Cinelli

Redesign until you find something that will work with inline images is one choice, and a common one people make. Check any other html email you get and see how many try and use background images. – Hultin

but i want to repeat my logo as background-image / so i can not use inside img / also we can not use javascript for some image width and height fixes / any other idea? – Bowel

Answer 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>

Sweatshop

is there a way for repeat it? – Bowel

If the dimensions of the table are larger than the image, the image will repeat to fill the table. – Sweatshop

can we use background attribute in <td> ? – Tirewoman

This doesn't work anymore for gmail. (does work for outlook). – Conjuncture

It's working for gmail again. And yes you can use it in <td> – Lox

Answer 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

Michele

thanks for helpful links / i have a little question from you that i don't know i can post it as a Q or not! however i just want to know what is the best way for making html emails in asp.net with c# and send them with code behind? should i make an html email in code behind only or there is a better way for making them (mean visually)! – Bowel

Answer 3

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)

Agricola

Answer 4

What eventually worked for me is changing an image extension from .svg to .png

It seems Gmail doesn't support .svg images.

Officer