Member Avatar for Romil797

Hi I have tried so much and I am wondering how I can put a background image in an email using gmail.

  • 5 Contributors
  • 5 Replies
  • 367 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by sknake

Recommended Answers

All 5 Replies

Member Avatar for Romil797

Well, thx but, I not only need html, but a bg image and I think my problem is limited css support in gmail

Member Avatar for avirag

Well you can try this:

<html>
<Head>
<body bgcolor="Green">
<img src="http://www.image path" alt="" />
</body>
</head>
</html>

Hope it helps.......:)

Edited by avirag because: n/a
Member Avatar for DdoubleD

Here is an example I put together that creates a table with background image using HTML. The HTML is inline and does not import a CSS file--sorry. I'm no expert in the subject, but wouldn't the import be performed by the client (browser, outlook, etc.) and not gmail, thus eliminating gmail as the cause of any limitation? Otherwise, I suppose you should generate the HTML from the style sheet during the construction of the html body...

public static bool SendMailHtml()
        {
            try
            {
                using (MailMessage mail = new MailMessage())
                {
                    // who is sending message...
                    mail.From = new MailAddress(addressFrom, nameFrom);

                    // add as many recipients as needed...
                    mail.To.Add(new MailAddress(addressTo, nameTo));

                    // subject of message...
                    mail.Subject = "Subject text goes here...";

                    // body of message...
                    mail.Body = "Body text goes here...";

                    // HTML: Create a table with background image and some text and additional image...
                    string bodyHtml = "<html><body>"
                        // create a table border...
                        + "<table border='3' width='720' height='480' ALIGN='center' ><tr><td>"
                        // place a table inside table border with a background image...
                        // NOTE: image will repeat if smaller that table dimensions...
                        + "<table background='cid:imageId' border='0' width='715' height='475' "
                        + "ALIGN='center' ><tr><th colspan='3' height='40'></th></tr>"
                        + "<tr ><td width='200'></td>"
                        // add some font/text stuff...
                        + "<td width='350' align='center'><font color='#800000' face='Mistral' size='8' >"
                        + "<b>Have a Very Merry Christmas</b><br/>"
                        // add additional font/text stuff...
                        + "</font><b><font color='#800000' face='Comic Sans MS' size='5'>"
                        + "Best Wishes from DdoubleD</font></b></td>"
                        // overlay particular area with another image (I just used same image):
                        + "<td width='170'><img src='cid:imageId' align='absbottom ' "
                        + "height='150' width='150' align='absbottom ' >"
                        // close tags...
                        + "</td></tr></table></td></tr></table></body></html>";

                    // Create the view from our html text and add our image file;
                    // and associate the image to the imageId (cid) used in the html code...
                    AlternateView htmlView = AlternateView.CreateAlternateViewFromString(bodyHtml, null, "text/html");
                    LinkedResource imagelink = new LinkedResource("Lock1.jpg");
                    imagelink.ContentId = "imageId";
                    imagelink.TransferEncoding = System.Net.Mime.TransferEncoding.Base64;
                    htmlView.LinkedResources.Add(imagelink);
                    mail.AlternateViews.Add(htmlView);
                   
                    mail.IsBodyHtml = true;

                    // account used to send message (same in this case)...
                    mail.Sender = mail.From;

                    // who should receive replies to this message (same in this case)...
                    mail.ReplyTo = mail.From;

                    // create a SMTP client and send message...
                    // this works for my gmail acocunt!!!
                    SmtpClient smtp = new SmtpClient("smtp.gmail.com", 587);
                    smtp.Credentials = new NetworkCredential(username, password);
                    smtp.DeliveryMethod = SmtpDeliveryMethod.Network;
                    smtp.EnableSsl = true;
                    smtp.Send(mail);
                }
            }
            catch (SmtpException ex)
            {
                System.Windows.Forms.MessageBox.Show(ex.Message);
                return false;
            }
            catch (Exception ex)
            {
                System.Windows.Forms.MessageBox.Show(ex.Message);
                return false;
            }
            return true;
        }
ExampleOutput.PNG 144.29 KB
Edited by DdoubleD because: n/a
commented: very nice! +6
Member Avatar for sknake

Well you can try this:

<html>
<Head>
<body bgcolor="Green">
<img src="http://www.image path" alt="" />
</body>
</head>
</html>

Hope it helps.......:)

I want to point out one thing here -- With HTML enriched emails you have to use pure HTML and not the newer XHTML. When I was first developing html emails they would never work and I was at my wits end trying to figure out why until I ran across that information.

In HTML the <img> tag is not closed (like DdoubleD's example), where as in XHTML it is closed with another tag or by ending it with /> . The mail readers can be pretty picky so be sure to watch your tags.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.