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">
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;
You answered your own question.
GMAIL doesn't use the "background-position
article
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">
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.
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.
Related
I try to write an HTML Email template that includes a button with a link and has a maximum width with the same margins left and right. However while some of the CSS part gets implemented some does not. For example for then button, the background and the font color is as I intended, however it does not add padding to the background and does not remove text-decorations.
A similar problem occurs when I try to set a maximum width for the overall Email with the same margins left and right. It implements the width but does not set the margins.
All of these things work out if I look at the template in a browser, only when I try to send it as an Email, it is displayed differently.
I already only use inline CSS and coded it as a table. For the button I wrote this code:
<tr><td>
<h1> <a style="background-color: #8c30ff; color:white; text-decoration: none; padding: 0.5em" href="https://google.com"> Join now </a></h1>
</td></tr>
And I tried setting the maximum width to this:
<table style="margin-bottom: 80px; margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 620px; align-content: ">
Email clients all have different support for different HTML and CSS features. You can check Can I email for detailed data about support across email clients.
max-width and margin in particular have mixed support, especially in The Outlooks on Windows. max-width is only supported in Outlook on Windows since Outlook 2016. And margin with auto values are not supported at all in Outlook on Windows. You must rely on tables with HTML attributes like align="center" for Outlook on Windows.
You can see an example of button code implementation by email developer Mark Robbins here: https://www.goodemailcode.com/email-code/link-button
And you can try this generator by Campaign Monitor: https://buttons.cm/
Using Litmus for responsive emails is showing great results for the majority of browsers, however some objects in the email are using Display:none !important; and are still showing up completely in Yahoo / Gmail, and partially in outlook 2013.
Update : Providing example -
Using the styling code as following
Basic Styling
.mobile {display: none; font-size:0; max-height: 0; line-height: 0; mso-hide:all;}
# Media
table[class=mobile] {display:block !important;line-height:1.5% !important; max-height: none !important; font-size: 12px !important;}
`<table class="mobile">
<tr>
<td>This should show up on mobile
</td>
</tr>
</table>
`
On most browser via litmus only one or the other will show, but on Gmail it is showing both the mobile an the browser text
display isn't supported in Outlook 2013 or googlemail - http://www.campaignmonitor.com/css
However z-index is. So you could try setting a negative z-index. I've not tested this, but worth a try.
Seeing as your question is lacking in any relevant information i can only advise you.
Read and follow the information here
http://kb.mailchimp.com/article/how-to-code-html-emails/
Especially note the point
99% of your CSS won't work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.).
Avoid as much css as possible, code like its 1999 - yes use tables
IF you must use css, use inline, and what you cannot use inline put in the body and not the head.
So if you are trying to hide something ?? what we dont know - you need more to start thinking about things like white text on a white background.
Try wrapping your mobile tables in this:
<!--[if !mso]><!-->
<div class="mobileonly" style="display:none; width:0px; max-height:0px; overflow:hidden;">
<!-- tables! -->
</div>
<!--<![endif]-->
then in your media query
div[class="mobileonly"] {
display:block !important;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
I know its an old post.
Solution is to use html tables to layout email content that will look and work well on outlook. Then wrapp the columns in </td> </td> so that the td columns will be killed on other email client's like gmail, mobile emails etc.
This way you can create emails with two columns on outlook but wrap the columns on non outlook.
Here my email template : http://jsfiddle.net/p5K6N/
I tired few things, I took 2 divs, one div for image and 2nd for texts , and make position : absolute
position : absolute <= is not working
Another thing I tried was background url of image , but still it is not working for me :( - i found on internet it is not working, but what's the alternate solution here?
<p style="text-align: center; font-size: 18px; font-family: 'Segoe UI';">Pursue Your Brand</p>
<div style=" background-image:url('http://beautifullinux.com/web/wallpaper/SolarisExpressBuild69/images/di-scurve-gray.png'); background-size:100%; width: 100%; height:100%; text-align: center; vertical-align: middle;">
some text will be disply here
</div>
Emails are an absolutely awful thing to do because of the fact that there are many different mail clients(gmail, outlook, etc...) and they all run differently. I know from recent experience that outlook does not support background-image or the position styling at all. There is also a few clients that will rip any divs you have out for some reason! In short there is no solution that will run on all email clients because emails are the devil! I found this website helpful for testing my emails though. http://putsmail.com/
http://backgrounds.cm/ this could work for some situations though
Please see http://www.campaignmonitor.com/css/ Not every Mailclient supports Background pictures!
<div style=" background-image:url...>
You have a space before [space]background-image:url... Take the space away.
Use background instead of background-image if you are going to give extra values such as height, width, etc.
I have created my HTML e-mail using tables, and the table has a background image which comes through fine in most web based e-mail clients.
I am struggling to get the background image to show in Outlook.
My latest attempt, I have tried doing the following:
<img style='position: absolute; z-index: 1; height:1157px; width:712px;top:0;left:0;border:0;z-index:1;' src="http://www.site.com/background.jpg" />
<table cellpadding="0" cellspacing="0" border="0" style="padding:0;line-height: 100% !important;font-family: Verdana,Times New Roman,Times,serif; font-size: 12px; position: relative; z-index: 2;" width="712" height="1153">
...
</table>
This image comes through in outlook, although the table is below the image.
I am guessing this is because Microsoft Word doesn't support "position" or "z-index".
I am looking for a push in the right direction to create this HTML e-mail, I don't mind redoing it from scratch. I just need to get this background image working in all web based and desktop e-mail clients.
I've already had a scan through http://www.campaignmonitor.com/css/, I'm guessing my best bet would be to completely slice every image and position them in tables?
If someone could give me a very basic guidance on how to do background images which work globally across all mail clients, I'd really appreciate it.
Thank you.
If you just want a background image for the table, use style="background: url(...)" in the <table> tag.
E-mail programs may still refuse to download and show the background image by default, but this would appear to be the best shot.
Mind you, Outlooks html interpreter is MS Word...
Any HTML that works when opened using MS Word will look fine in Outlook. This means, any 1990 style HTML, diagrammed by tables and stuff...
:-)
I have a minor question:
Im doing a email that is being sent out and wish to have no margin at the top of the email - so that a image or table is flush with the top of the viewport.
I have tried sticking body tags in the html email with margin-top: 0px and it works fine in Thunderbird. However when testing in Microsoft Outlook there is a margin top applied to the content. Is there any way to get rid of this margin or is it not possible in Outlook.
You need to add the following to the <body> tag.
<body topmargin="0">
Ultimately though Outlook is poor at rendering CSS and it's going to get worse with 2010 unfortunately. In the mean time, in-line styles are really the only styles that will work in the majority of cases.
Outlook is the bane of HTML emails everywhere.
Check out this discussion for some answers and tips.
Bottom line: code like it's 1998. Tables all over the place. Don't nest tables either, as that often causes problems. No external styles, so learn to love your inline style attributes.
Ugh, just thinking about it gives me a tummyache.
Maybe you could try to insert some css that overrules the body?
Something like this:
*{
margin: 0px;
padding: 0px;
}