richdan
asked on
Rendering background images in Outlook 2007 HTML
I need to send an HTML email to my existing clients that uses a table structure with some cells containing background images with overlaid text.
These images will not render correctly in Outlook 2007. Can anyone suggest a workaround or solution to this problem?
Regards
Danny
These images will not render correctly in Outlook 2007. Can anyone suggest a workaround or solution to this problem?
Regards
Danny
Outlook 2007 uses the HTML rendering engine from Word 2007 which means it barely has any support for CSS. My suggestion is to build your email in Word 2007 and use that code.
ASKER
Thanks fuzzboxer
This is not a css issue. There is no css in the source code. This is a simple background image for a table cell that will not render. Using Word 2007 to create the code is not a viable option
Thanks anyway
Regards
Danny
This is not a css issue. There is no css in the source code. This is a simple background image for a table cell that will not render. Using Word 2007 to create the code is not a viable option
Thanks anyway
Regards
Danny
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The added benefit to kevp75's suggestion of using the full url to the image is that your web server logs will track who rendered your e-mails.
The alternative is quite painful, and requires building a multi-part mime message with the images stored as base64 encoded message parts.
The alternative is quite painful, and requires building a multi-part mime message with the images stored as base64 encoded message parts.
ASKER
Thanks for your suggestions
The full url of the images is already being used. The reason that the images are not displaying is due to the fact that the rendering engine in Outlook 2007 will not recognise background images as a valid tag even with the full URL.
There is an article with more information here:
http://www.campaignmonitor.com/blog/archives/2007/01/microsoft_takes_email_design_b.html
I am trying to find out if there is any known solution or workaround to this probllem
Regards
Danny
The full url of the images is already being used. The reason that the images are not displaying is due to the fact that the rendering engine in Outlook 2007 will not recognise background images as a valid tag even with the full URL.
There is an article with more information here:
http://www.campaignmonitor.com/blog/archives/2007/01/microsoft_takes_email_design_b.html
I am trying to find out if there is any known solution or workaround to this probllem
Regards
Danny
well...apparently you are SOL.
What about trying out the CSS method? (dont' come back here and say it won't work, unless you actually try it out first please...)
What about trying out the CSS method? (dont' come back here and say it won't work, unless you actually try it out first please...)
I didn't work for me using CSS to set a background image via full URL.
now, what about using some CSS to absolutely position the image, give it a z-index, and position the text over it with a higher z-index?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
now I'm confused....
If the CSS method does not work, how then does the inline style work? inline styling is nothing more than inline CSS:
Your Comment
kevp75:
well...apparently you are SOL.
What about trying out the CSS method? (dont' come back here and say it won't work, unless you actually try it out first please...)
Author:rdivilbissDate:04.1
Rank: Master
rdivilbiss:
I didn't work for me using CSS to set a background image via full URL.
If the CSS method does not work, how then does the inline style work? inline styling is nothing more than inline CSS:
Your Comment
kevp75:
well...apparently you are SOL.
What about trying out the CSS method? (dont' come back here and say it won't work, unless you actually try it out first please...)
Author:rdivilbissDate:04.1
Rank: Master
rdivilbiss:
I didn't work for me using CSS to set a background image via full URL.
Loophole in the code, I would assume. Word 2007 supports the <div> tag and style element and it looks like a workaround.
>>now I'm confused....
>>If the CSS method does not work, how then does the inline style work? inline styling is nothing more than inline CSS:
Maybe the body tag can take an inline style. I didn't try that. I simply tried inline style on a division.
>>What about trying out the CSS method? (dont' come back here and say it won't work, unless you actually try it out first please...)
The asker did not post results, I made an example and tried it in an effort to anser the question.
>I didn't work for me using CSS to set a background image via full URL.
That was using embedded CSS for the body... not inline style.
Rod
>>If the CSS method does not work, how then does the inline style work? inline styling is nothing more than inline CSS:
Maybe the body tag can take an inline style. I didn't try that. I simply tried inline style on a division.
>>What about trying out the CSS method? (dont' come back here and say it won't work, unless you actually try it out first please...)
The asker did not post results, I made an example and tried it in an effort to anser the question.
>I didn't work for me using CSS to set a background image via full URL.
That was using embedded CSS for the body... not inline style.
Rod
understandable...still confuses the he77 outta me tho.....technically, if embedded CSS (or even linked) does not work, then neither should the inline style...
Hey, I just got it to work that way and could be happy with that as a solution...I don't know why it worked. on the DIV and not the BODY.
ASKER
Hi Rod
Many thanks for this suggestion. Unfortunately it does not work for me :(
I have used this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table width="300" height="656" align="center" cellpadding="5">
<tr>
<td height="650">
<div STYLE="background-image: url('http://www.richmansoftware.com/images/girllaptop.jpg'); background-repeat: repeat; background-position: left top;">
This is my text and it appears in front of the background image.
</div>
</td>
</tr>
</table>
</body>
</html>
The email displays without the background image in Outlook 2007
Any idea why it is work for you but not for me?
Regards
Danny
Many thanks for this suggestion. Unfortunately it does not work for me :(
I have used this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table width="300" height="656" align="center" cellpadding="5">
<tr>
<td height="650">
<div STYLE="background-image: url('http://www.richmansoftware.com/images/girllaptop.jpg'); background-repeat: repeat; background-position: left top;">
This is my text and it appears in front of the background image.
</div>
</td>
</tr>
</table>
</body>
</html>
The email displays without the background image in Outlook 2007
Any idea why it is work for you but not for me?
Regards
Danny
Note the image was cropped because my body text wasn't long enough to expand the division. Other than that, your image seems to work.
Just make sure you have enough text to make the division expand to reveal the whole image.
Q-22513712.jpg
ASKER
Thanks Rod
Are you sure you are viewing this in Outlook 2007?
I have tried this on 3 seperate PCs with Outlook 07 installed and all will not display the background image
The Outlook settings on all PCs are set to display images in messages
Danny
Are you sure you are viewing this in Outlook 2007?
I have tried this on 3 seperate PCs with Outlook 07 installed and all will not display the background image
The Outlook settings on all PCs are set to display images in messages
Danny
I'm terribly sorry...Outlook 2003 here.
The only place I have had success with a background image is if it is in the body tag.
I'm wondering if this is some sort of anti-spam setting in Outlook 2007.
In Outlook 2003 I had to manually tell it not to download images. In Outlook 2007 that may be enabled by default.
Frankly (not helpful to your question) I stopped receiving HTML email years ago, and still haven't changed that because of all the new zero day attacks over the last few years which primarily involved e-mail attachment vectors including images.
Sorry again about the 2003 -2007 confusion.
In Outlook 2003 I had to manually tell it not to download images. In Outlook 2007 that may be enabled by default.
Frankly (not helpful to your question) I stopped receiving HTML email years ago, and still haven't changed that because of all the new zero day attacks over the last few years which primarily involved e-mail attachment vectors including images.
Sorry again about the 2003 -2007 confusion.
ASKER
Images are disabled by default in 2007, but even if you allow them it will still not display background images.
No probs re confusion
Regards
Danny
No probs re confusion
Regards
Danny
It's not surprising. MS has been really locking down their products, which is one way to deal with some of the vulnerabilities, but fixing the vulnerabilities rather than crippling the products is probably better.
I loaded the following code into Word 2007 and it displays the background image:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body style="background-image:ur
<div>
<h1>Headingr</h1>
</div>
</body>
</html>
I tried it with the div and it didn't work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body style="background-image:ur
<div>
<h1>Headingr</h1>
</div>
</body>
</html>
I tried it with the div and it didn't work.
Word 2007 but what about Outlook 2007
Outlook 2007 uses Word 2007 as its rendering engine, so it displays like Outlook would.
I just tested in Outlook 2007 and it works.
mplungjan,
"Outlook 2007 will not recognise background images as a valid tag even with the full URL."
I don't think any of us solved this problem. Microsoft changed the rendering engine in Outlook 2007, and as far as I know, there is no solution unless MS decides to update/patch Outlook 2007.
Rod
"Outlook 2007 will not recognise background images as a valid tag even with the full URL."
I don't think any of us solved this problem. Microsoft changed the rendering engine in Outlook 2007, and as far as I know, there is no solution unless MS decides to update/patch Outlook 2007.
Rod
Wow, I forgot I had this out there. Here is a great site that highlights what you can and cannot do with Outlook 2007.
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html#pc
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html#pc
Hi,
Being a professional emailtemplate programmer I don't use backgroundimages anymore since the introduction of MS Outlook 2007.
Backgroundimages simply do not get displayed in Outlook 2007.
Regards,
Jon
Being a professional emailtemplate programmer I don't use backgroundimages anymore since the introduction of MS Outlook 2007.
Backgroundimages simply do not get displayed in Outlook 2007.
Regards,
Jon
It depends on how desperate you are to achieve this. One possible work around that I have investigated is not to us background images, but in fact normal images which - wait for it (cringe) - retrieve a dynamic image generated by asp.net http handlers.
In my situation i wanted to welcome a person by name, and tell them how long they had to go to a certain date in the future (+ some other welcome text etc). This information was dynamically addeded using GDI+ on the server.
I leaves a bad taste in your mouth, but it works and the email looks the way you want it to look - and in the end of the day the only bit thats slightly out of the ordinary is the use of GDI+ to effectively draw the text onto the image that you would have otherwise used as the background, everything else, including retrieving the image of the hard drive (which your server would have done anyway) is the same.
There is also one up side to this too. Because the text is effectively an image, you can anti-alias it.
Si
In my situation i wanted to welcome a person by name, and tell them how long they had to go to a certain date in the future (+ some other welcome text etc). This information was dynamically addeded using GDI+ on the server.
I leaves a bad taste in your mouth, but it works and the email looks the way you want it to look - and in the end of the day the only bit thats slightly out of the ordinary is the use of GDI+ to effectively draw the text onto the image that you would have otherwise used as the background, everything else, including retrieving the image of the hard drive (which your server would have done anyway) is the same.
There is also one up side to this too. Because the text is effectively an image, you can anti-alias it.
Si