Background Image not showing in Email...

JCruz063 · Sep 28, 2009

Hi All...

What I'm trying to do
I'm trying to send an email with a background image, using ASP.NET 3.5. I am formatting the email as follows:

Code:

[COLOR=blue]string[/color] htmlBody = @"
<table [b][COLOR=red]style='background-image:url(cid:imgBg)[/color][/b]; padding:0px;'>
	<tr>
		<td colspan='2'>			
			<img alt='' src=cid:imgHeader />		
		</td>
	</tr>
.
. [COLOR=green]// some more stuff here[/color]
.
</table>";

... and the C# code I'm using looks something like this (some lines are missing, but you get the idea):

Code:

[COLOR=blue]string[/color] nl = Environment.NewLine;
mailMessage.Body = [COLOR=brown]"Message from contact page:" [/color]+ nl + nl +
   [COLOR=brown]"Name: "[/color] + txtName.Text + nl +
   [COLOR=brown]"Email: "[/color] + fromEmail + nl +
   [COLOR=brown]"Subject: "[/color] + subject + nl + nl +
   [COLOR=brown]"Message: "[/color] + nl + txtMsg.Text;

[b][COLOR=purple]LinkedResource[/color] imgBg = new [COLOR=purple]LinkedResource[/color](Server.MapPath("images/bg.jpg"), MediaTypeNames.Image.Jpeg);
imgBg.ContentId = "imgBg";[/b]

[COLOR=purple]LinkedResource[/color] imgHeader = new [COLOR=purple]LinkedResource[/color](Server.MapPath("images/header.jpg"), MediaTypeNames.Image.Jpeg);
imgHeader.ContentId = "imgHeader";

[COLOR=purple]AlternateView[/color] htmlView = [COLOR=purple]AlternateView[/color].CreateAlternateViewFromString(htmlBody, Encoding.ASCII, MediaTypeNames.Text.Html);
htmlView.LinkedResources.Add(imgBg);
htmlView.LinkedResources.Add(imgHeader);

mailMessage.AlternateViews.Add(htmlView);
mailMessage.IsBodyHtml = true;

The Problem
When viewing the email (at least from yahoo, gmail, and hotmail) the background image (imgBg) does not show up. Everything else shows up correctly (including the header image), but I get a white background instead of the intended background image.

Now the background image is part of the email, and I see it as an attachment, but it is not shown as a background.

What I have tried
I have tried (to no avail) all sorts of things in order to get this thing to work.

1. Instead of using linked resources, I have tried adding a direct link to the image, that is: background-image:url(

http://mydomain.com/images/bg.jpg).

Same problem. The header image shows correctly (using src="

http://...")

and the background does not show up.

2. I have tried background:cid:imgBg and background:

http://...

(with and without quotes) instead of background-image:url(...). Same differerence.

3. Instead of using AlternateView, I have just set mailMessage.Body to the html code (with and without the linked resources) - no good.

4. Instead of <table background/-image...> I have used the whole <html><body> tags... to no avail.

5. Instead of <table> tags I have used <div> tags for the outer container that has the background image... Same issue.

An Interesting Detail
A friend of mine uses an email reader similar to Outlook on a Mac, and the background image displays correctly there, so the code works... somewhere, at least.

The Question
How on earth do I get the background image to display on gmail, yahoo, hotmail, etc?

Thanks.

_________________________________
I think, therefore I am. [Rene Descartes]

jbenson001 · Sep 28, 2009

LinkedResources create an attachement:

http://msdn.microsoft.com/en-

us/library/system.net.mail.linkedresource.aspx

try:
style="background-image:url('paper.gif');

jbenson001 · Sep 28, 2009

Sorry,

ment to say, try:
try:
style="background-image:url('

http://mydomain.com/images/bg.jpg');"

jmeckley · Sep 28, 2009

do those email clients allow background images? now that you mention it, I don't ever remember getting an email in gmail with a background image.

try composing an email in outlook with a background image and send it to your gmail/yahoo/hotmail accounts. if the image does not show up, the problem is most likely the desitination providers, not your code.

also try viewing the html with different browsers. (IE 6-8, FF 2.0 - 3x and Opera.) With the CSS and JS variations between browsers this may also play a factor in how the email is rendered.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

JCruz063 · Sep 28, 2009

Thanks for the replies guys...

jbenson001 said:
try:
style="background-image:url('
http://mydomain.com/images/bg.jpg');"

I have done exactly that. See item 1 under "What I have tried" in my original post.

jmeckley,
I have the latest Chrome, FireFox, IE, an Safari installed on my machine and they all behave the same way. But, like I said, a friend of mine has an email client which he uses on his Mac (can't remember the email; I think it's iMail) and the background image displays correctly there. I'll try sending an email with a background using Outlook and see what happens.

Thanks again.

_________________________________
I think, therefore I am. [Rene Descartes]

JCruz063 · Sep 28, 2009

Well, I sent a message with a background image using Windows Live Email (Outlook's much less powerful cousin) to a gmail address and the background image does not show up. Grrrr!!!! Why would they prevent background images from showing? I don't get it. They allow the <img src='...'> to display correctly, so why not the table background?

_________________________________
I think, therefore I am. [Rene Descartes]

jmeckley · Sep 29, 2009

it's a security feature. you can embed malicious code within an image.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Background Image not showing in Email...

JCruz063

Programmer

jbenson001

Programmer

jbenson001

Programmer

jmeckley

Programmer

JCruz063

Programmer

JCruz063

Programmer

jmeckley

Programmer

Similar threads

Part and Inventory Search

Sponsor