Background-Image CSS Inside an HTML Email - Gmail Does Not Support

Background-image css inside an html email - Gmail does not support

Have you tried setting the background attribute of a table?

This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.

Example (Tested in Gmail)

    <table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
        <tr>
            <td>
                Email Content...
            </td>
        </tr>
    </table>

sending html mail with images not displaying in gmail

It turns out I was using CSS to have the picture in the background. Gmail didnt like that. instead i used an image tag.
I cant substantiate this but : I have done that previously too with no success but what did previously is that i did not use tables for my layout.
so to sum up...
use tables for the layout of the html email
insert image tag with width, height , alt tag
and gmail , hotmail and yahoo would display ur image.
hope this saves sometime for someone :)

html email with background-image style not shown

At last I found the answer.

Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.

Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.

More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx

HTML Email Template not showing background image in Outlook 365 anymore

The background property (only when there is a URL) is not supported in Outlook. The fact is that Outlook uses Word for rendering message bodies. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

Watermark in GMail email using inline CSS - Can't use STYLE tag - Overlay transparent image in center of email body

Here is the official list of Gmail Supported CSS Properties & Media Queries

position is not listed so it can't work.

On the other hand, Contrary to what I thought, background-image are supported, as well as background-position so you probably could use it to make your Watermark.

Only for Gmail and modern clients I guess.

function test_Send_Email_With_Styling() {
  var html = '<div style="background-image:url(https://example.com/your-transparent-watermark.gif);
     background-position:60px 40px;background-repeat:no-repeat;">
    <div>Line One</div>\
    <div>Line Two</div>\
    <div>Line 3</div>\
    <div>Line 4</div>\
    <div>Line 5</div>\
    <div>Line 6</div>\
    <div>Line 7</div>\
    <div>Line 8</div>\
    <div>Line 9</div>\
    </div>';

  MailApp.sendEmail({
    to: "example@gmail.com",
    subject: "Test Watermark",
    htmlBody: html

  });
}

css for HTML Email content not getting applied in gmail

You can use inline styles like this...

https://codeshare.io/GAEng8

<table width="100%" cellpadding="0" cellspacing="0" id="dummy" bgcolor="#F7F6F6" style="border: 1px solid #dfdddc;border-collapse: collapse;border-left:0;border-right:0;">  <tr>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Label</td>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Value</td>  </tr>  <tr>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>  </tr>  <tr>    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>  </tr></table>

---

Related Topics