23

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?

Aliaksandr Sushkevich
  • 11,550
  • 7
  • 37
  • 44
SilverLight
  • 19,668
  • 65
  • 192
  • 300
  • Please don't put tags in the title. Also, this has nothing to do with ASP.Net. – SLaks Nov 04 '11 at 20:50
  • there really is nothing you can do since positon and z-index are not supported by gmail either – CBRRacer Nov 04 '11 at 20:52
  • 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. – Doozer Blake Nov 04 '11 at 20:52
  • 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? – SilverLight Nov 04 '11 at 21:05

4 Answers4

44

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>
Adam Lear
  • 38,111
  • 12
  • 81
  • 101
jdavies
  • 12,784
  • 3
  • 33
  • 33
7

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

Piotr Rochala
  • 7,748
  • 2
  • 33
  • 54
  • 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)! – SilverLight Nov 04 '11 at 21:21
1

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)

Drachenfels
  • 3,037
  • 2
  • 32
  • 47
0

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

It seems Gmail doesn't support .svg images.

Aliaksandr Sushkevich
  • 11,550
  • 7
  • 37
  • 44