Gmail HTML email background

Question

I'm working on an HTML email. The problem I get is that GMAIL doesn't use the "background-position" i give it. I have a table with 100% width that has a background that has to be centered. Most clients do this perfectly but Gmail doesn't. Is there a workaround for this?

The inline CSS is like this: (i've split all the background properties up because otherwise most clients don't display it the right way)

<table style="background-repeat: no-repeat; background-position: center top;" border="0" width="100%" align="center" bgcolor="#1E1411" background="assets/mainback2.jpg">

Answer 1

It IS possible, you simply have to put all the background style in one line, like so:

background:#1E1411 url(assets/mainback2.jpg) no-repeat center top;

But because some email clients can't handle background images you have to separate the colors.

background:url(assets/mainback2.jpg) no-repeat center top;
background-color:#1E1411;

Answer 2

You answered your own question.

GMAIL doesn't use the "background-position

article

Answer 3

From: http://css-tricks.com/using-css-in-html-emails-the-real-story/

What you CAN'T do:

Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.

Link to an external stylesheet. Not many email clients support this, best to just forget it.

Background-image / Background-position. Gmail is also the culprit on this one. Clear your floats. Gmail again.

Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.

Font-anything. Chances are Eudora will ignore anything you try to declare with fonts. There are quite a few more things you should be aware of. For a great complete list of what online email services support what, check out this article at Xavier Frenette.

So, no can do buddy.

Answer 4

Put the background image on a td like,

<td background="http://someimageurl" style="background-repeat:no-repeat">

and then position the table on center by align="center" . Give the table same width as background to get a centered effect. The solution of centering this is but not applicable to all cases.

Answer 5

Anytime I want background images supported in clients such as Gmail I simply use this:

http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/

Answer 6

试试看http://zurb.com/ ，它的HTML电子邮件可以在任何设备和客户端上运行。

Answer 7

May be you have to define your background in STYLE quotes not separately. write like this:

<table style="background-repeat: no-repeat; background-position: center top; background-image:url(assets/mainback2.jpg)" border="0" width="100%" align="center" bgcolor="#1E1411">