C# html Email - Div/Text over Image

I'm trying to create a nice looking email for when a user registers on my website however I am not able to display the text over an image the usual way. Instead, the texts are displayed below the image.

I know I can't use StyleSheets, and that I should stick to CSS 1.4..

I'm having a background image which i'm stretching (by setting its width and height) and I would like to put some text on top of this image. In normal html, I can use css methods such as float: left; position: absolute for the div to be floating over the image. But this doesn't work within the C# code because it gets truncated in most email clients.

The image will only display if it is written in the following way:

 <div style='width: 580px; font-family: Calibri; font-size:13px;'>

         <img style='height: 45px;   width: inherit;' src='http://www.somedomain.com/mail/background.png' />
Test
Test2
Test3
</div>

I tried to embed the code above within a style and it simply doesn't work. For example:

<div style='background:url(images/background.png); position: absolute; top:45px; width:550px; paddin开发者_运维问答g: 15px;'> SOME TEXT HERE </div>

OR

<div style='background-image:url(images/background.png); position: absolute; top:45px; width:550px; padding: 15px;'> SOME TEXT HERE </div>

OR

<table>
<tr>
<td style="background-image: url(background.png);">Testing Page</td>
</tr>
</table>

If you change "background-image: url(background.png);" to "background:red;" it works and this is confusing!

How do I make this work properly in most email clients as well? (Gmail, Hotmail, Outlook, Thunderbird, Windows Mail, etc.)

Thanks for any help you can provide :)

You should probably check out all of your emails in Outlook 2007. Microsoft really broke the capabilities for HTML in Emails by using the rendering engine of MS Word. To that end background-image is not recognized by Outlook 2007. Here is the MSDN on supported HTML in Outlook. Use outlook as your base line as it's support is the most basic.

Iv had similar issues with images in html and images inside an email. I solved the Image issue by using an inline attachment. The trick is to use a content id to set the image.

Hopefully this code will help:

EDIT: Width and Height settings on the actual image don't seem to work though . . . :/

        string contentID = "Image1.gif".Replace(".", "") + "@test";

        // create the INLINE attachment
        string attachmentPath = Server.MapPath("Images/Image1.gif");

        inline = new Attachment(attachmentPath);
        inline.ContentDisposition.Inline = true;
        inline.ContentDisposition.DispositionType = DispositionTypeNames.Inline;
        inline.ContentId = contentID;
        inline.ContentType.MediaType = "image/gif";
        inline.ContentType.Name = Path.GetFileName(attachmentPath);

        //then add in the message body
        //stringbuilder to construct the message
        sb = new StringBuilder();

        sb.Append("<div style=\"font-family:Arial\"> Hello World!<br /><br /><img src=\"@@IMAGE@@\" alt=\"\" Width=\"250px\" Height=\"250px\"><br /><br /></div>");

        //creating the message with from and to and the smpt server connections
        mail = new MailMessage("SendersEmail@Address.com", "RecieversEmail@Address.com");
        SmtpServer = new SmtpClient("smtp.gmail.com"); //Add SMTP settings into the Web.Config --> ConfigurationManager.AppSettings["MyCustomId"]

        mail.Subject = "Testing Emails";
        mail.IsBodyHtml = true;
        mail.Body = sb.ToString();
        mail.Attachments.Add(inline);

        // replace the tag with the correct content ID
        mail.Body = mail.Body.Replace("@@IMAGE@@", "cid:" + contentID);

You can't use relative urls (for example "url(background.png)" or "url(images/background.png)" because it's relative to what? the email message? The email message has no folders, file system, etc. as does a web server.

You have two choices: use the complete url syntax as you did in the first example or create a MimeHtml message (MHTML). In MHTML, you can bundle an image in with your email and may be able to reference it in the way you're hoping.

I hate being the bearer of bad news, but you can't cross-platformly (is that a word?) have a background image and/or stacked elements in HTML emails.

You're trying to use CSS features that are not supported by all major email viewers. Try taking a look here to see what's supported and what's not:

http://www.campaignmonitor.com/css/

There's also a sitepoint book which you might be interested in:

http://www.sitepoint.com/books/htmlemail1/