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

Question

I need to put a watermark in the body of a Gmail email using Apps Script. The code to send the email is written in Apps Script using:

MailApp.sendEmail(contents);

Gmail will not allow a STYLE tag in the HTML for the email. So, the only way to style the HTML is inside of the HTML tags.

When I try to use position:absolute or position:fixed or position:relative in the inline styling of HTML for the email, it doesn't work. Is there any way of placing a transparent HTML element over the content of the email body? I need to do this in server side Apps Script code.

Here is what I have tried:

function test_Send_Email_With_Styling() {
  var html = '<div style="position:fixed;top:40px;left:60px;background-color: red;opacity:0.5">\
    Watermark Here\
  </div>';

  html = html + '<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>';

  MailApp.sendEmail({
    to: "[email protected]",
    subject: "Test Watermark",
    htmlBody: html

  });
}

Answer 1

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: "[email protected]",
    subject: "Test Watermark",
    htmlBody: html

  });
}