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?
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>
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
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)
What eventually worked for me is changing an image extension from .svg to .png
It seems Gmail doesn't support .svg images.
Related
I am creating an email template and i need to writte text in the "middle" of an image, but some email system's doesn't allow positioning, what can i use?
My HTML:
<img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background-5.jpg" style="width:400px; height: 350px;" />
<p style="color:blue;">SOME TEXT FOR CONTENT..</p>
example: https://jsfiddle.net/2zehs9f5/
If you're doing this for email, I'd recommend adding the text to the image itself, rather than positioning it with a background-image. The reason for this is that background-image isn't very well supported (particularly in Outlook 07/10/13) and will have to fallback to a solid colour, which may ruin the entire design.
I'd also move away from p tags, as they can render differently in different email clients.
Here's a JSFiddle of the finished code: https://jsfiddle.net/czxrp2hf/1/
Also, this link is quite helpful for finding out what CSS is supported in which email clients: https://www.campaignmonitor.com/css/
All in all Natalie has right.
If you want to try something like this:
<td valign="middle" background="your_image.jpg" width="100%" style="background-image: url(your_image.jpg)">
Your text here
</td>
should work in all major mailer (web and offline); except, as far as i know, Outlook 2007 and Outlook 2010.
Be aware that i put both the standard definition of background image AND the inline CSS one.
Currently using http://backgrounds.cm method for background email generation. When not using the code, the email looks correct in most test. When the background image is added, Outlook 2013 will display it, but all the table formating expands to 100%. Not sure if I'm implementing it incorrectly.
Currently applying the background to the topmost table which contains several cells, not the entire body.
I've pasted the code here: http://pastebin.com/dX8zEZDV
I did a couple things to fix it:
Changed your doctype from strict to transitional.
Removed duplicate meta tags.
Closed all unclosed-tags (img and br tags).
Removed your outer two containing tables (#container_table and #container_wrapper).
In #container_table, removed min-width, added margin:0 auto and align="center" so table is centered.
In VML code section, replaced mso-width-percent:1000 to width:850px.
Updated closing VML tags to correct nesting order (closed prematurely).
Optional:
In VML code section, changed the color to better match your background (#292929).
The only instance I've found where VML background images and the inline fallbacks don't work is when I view my Outlook email using the Gmail app on Android. However, when I view my name#gmail.com email in the same app, it's fine. So in the event the background image doesn't load, the bgcolor will display so your users can still see your white text.
Note:
Always remember to validate your code. Even if there are some errors you can't fix (for instance the background attribute in the td won't validate), you can verify all your tags (minus any VML code) are nested/closed properly, as well as finding any accidental special characters you may have copied into your code from Photoshop or Word.
Updated source at jsfiddle: link
If table formatting expands to 100%, it's because you set "Table cell width" setting to "Full email width". It's best to use VML background images on fixed width and height table cells.
Ideal settings for backgrounds.cm are "A single table cell" and set width and height. Otherwise, the result might look different from non-Outlook clients (sometimes it's still OK if it's agreed upfront with stakeholders).
I coded an html email, and just tested in Gmail. Everything shows up fine besides for a background image. I put the background image on my wrapper table, like this:
<table cellpadding="0" cellspacing="0" border="4px solid grey" align="left" background="http://www.totalrecallsolutions.com/corporate/email templates/images/appt_reminder_one_bg.jpg">
And still, there is no image showing up in Gmail. I understood from my google searches that this is the correct way to make a background image show up in Gmail. So why is it not showing up?
Thanks!!
Besides the url with spaces, there's another thing, Gmail doesn't allow url() attribute in inline css
Don't use background images. Gmail, among others, will ignore any
url() attribute in an inline style, and the simple background= tag
attribute. You can use background colors if you wish (bgcolor tag
attribute or background-color: css statement).
Here is the link where I read that: http://groundwire.org/support/articles/css-and-email-newsletters
Regards
Gmail has added support for background and background-image properties last February (according to Campaign Monitor).
But in order for it to show, your code must contain at least one < img > tag. You can use spacer.gif to trick it (or any transparent image for that matter).
In my case I had CSS styles defined for background-repeat and background-size in a style tag that was being transformed to a single inline background: no-repeat/cover that was overriding the background attribute for my table. Using just [table background="image-url"] worked for me
I am creating and sending HTML e-mails.
I'm using markup like
<table style="background: url('http://example.com/App_Sprites/image.gif');>
However, the images do not appear when I download messages containing this sort of markup from an e-mail client. When I do things like
<img src="http://example.com/App_Sprites/image.gif" />
the images download fine.
I need the image to be a background because I need to show some text over it. Can I use the image tag and position the text over it somehow? Or should using the background image actually be working, and something else may be wrong?
Html emails usally don't download background images.But there is a trick you can do.
<div style="z-index:10;position:relative">your text here</div>
<img src="http://example.com/App_Sprites/image.gif" style="margin-top:-20px" />
play with margin-top number
The background property works on some email clients use this as a reference. This is very useful.
I would avoid using background images and stick to solid colors, the reason why is because not all email clients are going to have this feature and capability to see the background image.
or use base64 directly =)
hm divs are even better than tables
Is it possible to stop repeating background image in a table data (TD) without CSS ?
For example
<table>
<tr>
<td background="http://foobar.com/image.jpg">Some text</td>
</tr>
</table>
I'm looking for a HTML solution, because I'm developing HTML template which will be used for a mail newsletter.
You can append the css to your tag straight in your html code:
<td style="background-image:url(smile.gif); background-repeat:repeat;">
I think there is no way to do that just using html!
Simple answer: No.
Fortunately, most emails you can use inline css styling. As such, I'd try the following and see if it accomplishes what you're looking for.
<td style="background:url(http://foobar.com/image.jpg) no-repeat;">Some text</td>
In the event that fails (as I've seen it do so before), you're only other option is place the image in an <img> tag and manipulate it so it falls underneath the text.
See here for supported CSS attributes: http://www.campaignmonitor.com/css/
Hope this helps.
background images are supported. Please check out this generator:
http://backgrounds.cm
If you want the image not to repeat just add an inline style:
style="background-repeat: no-repeat;"
to the tags containing the background image.
For maximum compatibility, you should use both inline CSS and the HTML background attribute, as some clients ignore one but not the other.
<td style="background-image:url('http://www.example.com/smile.gif'); background-repeat:no-repeat;" background="http://www.example.com/smile.gif">Some text</td>
Some points to note:
You must use a absolute URL for the image src
The quotes around the the URL in the background-image inline style should be there (the opposite of the normal CSS recommendation, but some clients have issues if the single quotes aren't included.)
Don't use CSS shorthand, again some clients ignore it although they will parse the longhand. Also, some will set a background color of #000000 if you don't set a background-color in the shorthand version.
Background images don't work at all in Outlook 2007, unless you use some rather nifty Microsoft proprietary code. Unfortunately, that code doesn't allow you to stop it repeating.
The best way to stop it repeating is simply to make the image much bigger than it needs to be, so that it never needs to repeat.