Is there a reliable way to overlay an image over another image in a table-based HTML email? Keep in mind that, in order to render correctly, styles need to be inline.
Apparently the only way to have a bg image that works in all email readers is by specifying one for both the HTML background attribute of the body tag (for Outlook 2007, 2010) and the HTML background attribute of an HTML table that occupies the entire page (for all other email readers). It doesn't appear to be possible to have a bg image anywhere else that will display in all email readers.
Generally speaking the answer is "no". You can't overlay foreground content on top of other foreground content, and the options for adding a bg image are almost non-existent. But if you can manage with a single large bg image for the body tag (and table wrapper), combined with one or more foreground images, then "yes".
See: http://blog.mailermailer.com/2011/04/background-images-in-html-email-the-naked-truth/
Edit:
After running some exhaustive tests in Litmus, the answer is a resounding "no". Outlook 2007 and later only supports 2 ways to display a bg image: using the HTML background attribute on the body tag, and using the inline background-image style on the body tag. But in both cases, Outlook scales the image differently than other email readers, and there's no way to prevent the bg image from tiling.
For all practical purposes, in cases where it's important to support a wide variety of email readers:
There's no way to overlay images (or any other type of content).
Bg images are not supported.
From what I can gather backround images are not supported through all browsers. However, you may find this page from Campaign Monitor useful. At least it is quick to test the code to see if it suits your readers needs - check your email stats against which clients work before implementing if I were you.
I believe the above advice regarding "the only way to have a bg image that works in all email readers is by specifying one for both the HTML background attribute of the body tag" is also correct although Campaign Monitor seems to indicate otherwise. I would be careful to work out which browsers/email clients use the fallback and as to whether that would negatively effect your design.
As Z Index is supported except in Gmail (so perhaps not all that well), you could try to use that to create a design. Given that Gmail doesn't support it and the fallback is likely to be ugly as sin, you probably don't want to try this.
Related
I made a picture to use as a background. I tried using that picture with CSS but Outlook doesn't support that. So I just put the picture in body tag. Now I am able to display the picture but it is repeating.
I tried to stop repeating using CSS background repeat: no-repeat; but it isn't working. Whenever I try to use CSS on that background image, the image is not at all displaying in my email.
So I need a way to stop repetition of background image in HTML without using CSS.
Any help?
Email clients are notoriously bad at interpreting CSS or any standards for that matter. You can take a peek at this list: http://www.email-standards.org/clients/ to see what is and what isn't supported by the client you're targetting.
Keep in mind however that using images or extensive markup in e-mail messages will most likely (read: always) lead to headaches and - if possible - need to be avoided.
I have issue with background-images working for email templates(i know background image won't work across all email templates consistently but my client want it to email with background images).
I want to add background image for for the mail template but no luck as of it as it is not supported in most of the clients.
I tried to ovelay text on image using negative margin-left and position absolute but no luck as margin-left is not supported in outlo0k,gmail and notes.
Any help/suggestions would be great
Thanks in advance
Yes, there are still some good solution for achieving background images.
In Outlook, which is one of the more difficult clients to work with this post from Campaign Monitor's blog should point you in the right direction. The is a technique that uses VML to get background images working well in Outlook 2007, 2011, 2013.
The other tip is add the !important declaration to your CSS for Gmail to recognize the background image.
You might also want to set background colors if you're using tables with old bgcolor attribute setting just in case your background images don't load. That way if you have say...gray text on a blue background it still looks okay.
Finally, set you background images up as inline CSS and use media queries so on the clients like the iPad that are easier to work with you get the results you want.
Why do images defined in CSS (like backgrounds, lists marker, ...etc.) not behave in the same way in the browser as HTML images? For example, they can't be selected by the mouse, and you can't right click on them.
Images are generally used in CSS for one thing, backgrounds. Which means they aren't used for the same things HTML images are being used for (displaying the actual image as part of the content).
When an image is part of the content, it can be saved and copied etc, because it
is likely to be considered interesting by the reader. Backgrounds (or list-markers etc) however, are less likely (unless the reader is a developer) to interest the reader enough to want to copy them. Instead, the focus is on the actual content of the element (which the background was applied to).
I guess it is a question for browser vendors why they allow certain behavior only when dealing with <img> tag.
However, you can use dev tools/Firebug/whatever and you can download the image file.
I ask because my buddy posted a question earlier on How to resolve issue with image path when testing HtmlHelper? and a few of us in the office got talking about how to resolve this.
One of the guys suggested that he wouldn't have this issue (Test crashing because it has a dependency on functionality in IIS) if he was referencing the image from CSS.
His point made perfect sense, but it kind of threw us back because we'd always been referencing images with <img/>. Were we doing it wrong all along? None of us are experts in this area so I thought it was worth putting to the community. What's the best way to reference images?
There are a variety of benefits to using CSS background-image and inline <img /> tags. CSS background images are great for decorative elements (content borders, background patterns, etc.) as they can be repeated with background-repeat. They make a poor choice for content-centric images, though, like product photographs, bio avatars, etc. Here, inline images work best because you can use an ALT attribute, and images are displayed regardless of browser (some older mobile browsers don't support backgrounds in CSS).
The tag is the best way.
It's standards compliant, accessible, and SEO friendly.
Indiscriminately putting all images into CSS background-image properties is a terrible idea in my opinion. Just a few things you deprive yourself of:
You can't stretch and resize images (may sometimes be necessary)
You can't use the ALT attribute (as David already says)
Background images usually won't get printed
they won't get indexed by search engines
they are difficult for the user to store
missing images won't show up with the "broken image" icon in IE
bad browser layout engines may have problems zooming, because the surrounding container could get zoomed apart from the image content (Shouldn't be a problem in FF though)
you always need an additional container to put the background-image in so you can't e.g. do DOM operations with image elements
the <img> tag exists for a reason, and should absolutely be used where appropriate (i.e. where the image is part of the content rather than decoration or background). For the "sort icon" thing I second what David says, it's fine both ways, but if it's a clickable element it should be an img.
I creating a program which send newsletter with a background image. It works fine on Office 2000-2003, thunderbird, but the background image does not show on Outlook 2007. I read that Microsoft changed the rendering engine and did not support the background css property (it is possible but only applied to the Body).
Is it achievable to create an email which will render like that : http://www.freeimagehosting.net/image.php?a7905f7d16.png
on Outlook 2007 ?
What is the solution ?
Thank you for your help.
Shouldn't be too hard, as you're only needing one background image for the whole layout. Here is a blog post telling you how to get your background images working for the body.
Then just put the images and text inside a table and style it up with the correct width, and BAM, you're good to go (:
Not only has Outlook 2007 stopped the background image from showing in anything but the body element, apparently you have to be careful about how you set the styling of said background image as well. Perhaps this is your problem?
Campaign Monitor has a short post about it.
perhaps using a table and put a background on the table would work. either way, if you have styled it using css only, your in trouble and will most likely have to take a few steps back and do alot of the styling again.
fyi: www.fixoutlook.org
Outlook by default uses Trident, IE's engine for incoming mail, and Word HTML rendering engine for outgoing mail... Until Office 2007 (and some people hate it).
Now, it uses Word 2007's rendering, wich is rather lacking. On microsoft's page you can see that de body element doesn't support the style attribute. Because of this, you can't give a background to the body.
May be enclose everything in a styled div, instead of styling the body?