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: "example@gmail.com",
    subject: "Test Watermark",
    htmlBody: html

  });
}

gael · Accepted Answer · 2019-06-05T06:20:36.923

2

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

  });
}

edited Jun 05 '19 at 06:20

answered Jun 04 '19 at 16:36

gael

1,314
2
12
20

The inline `background-image` is working. But I'm getting a background of many, many images, not just one. – Alan Wells Jun 04 '19 at 16:56
yep I thought about that last night but it was too late for me ;) I added the background-repeat:no-repeat; propertie so that your background won't repeat – gael Jun 05 '19 at 06:23
I also added `background-position: center;opacity:0.5` to center the image in the email and allow the email content to show through the image. – Alan Wells Jun 07 '19 at 13:01
@gael, I tested ur code in GAS editor (using url https://amymhaddad.s3.amazonaws.com/morocco-blue.png). It says syntax error. I tried to modify the positions of the quote symbols, syntax errors gone but nothing but blank in the gmail. Is there anything I missed out? Pls advise. tq – dell Apr 08 '21 at 14:28
@AlanWells, it seems like the code from gael works for u, even with additional styles. Would u mind sharing ur full code, pls? Would like to compare it to what I've done to see what went wrong. I just couldn't understand why I could have syntax errors when I literally copy&paste only to test before any modification. – dell Apr 08 '21 at 14:33
@dell you should probably post your own question with your full code. You can then identify me in comment so that I could perhaps help. – gael Apr 08 '21 at 17:03
@dell I just posted an answer. – Alan Wells Apr 08 '21 at 23:31
@gael, I actually had posted a question earlier before I found this question. Initially I thot this could be done with only css in html but someone answered that Gmail has limited CSS properties that it supports so I begin to explore for solution using GAS or Jscript that works on GAS editor. Perhaps u can answer in my question post https://stackoverflow.com/questions/66985968/how-do-i-get-the-watermark-text-onto-the-image-and-displayed-accordingly-in-html – dell Apr 09 '21 at 07:15
When I finally got to see the background img using the code below, I tested back the above code. I copied & pasted. I finally knew the culprit why I didn't get it initially. It was just the white spaces. 1 was before the property "background-repeat" while another was "
Line One
\". I got the code works after I removed the spaces! Thanks!! ;) – dell Apr 09 '21 at 23:46

Alan Wells · Answer 2 · 2021-04-09T14:37:51.993

The HTML I'm using to include a watermark is:

function test_Send_Email_With_Styling() {
  var html = '<div style="background-image: url(' + "'" + 'https://i.imgur.com/40mRGbt.png' + "'" + 
    ');background-repeat: no-repeat;background-position: center;opacity:0.5">'

  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>';
    
  html = html + '</div>';//Add an ending tag for the background image DIV
  
  var myEmail = Session.getEffectiveUser().getEmail();//Send email to yourself
  
  try{
    GmailApp.sendEmail(myEmail, "Test Watermark", "", {htmlBody:html})
  } catch(e) {
  
    MailApp.sendEmail({
      to: myEmail,
      subject: "Test Watermark",
      htmlBody: html

  });
  
  }
}

Thanks for sharing your code @AlanWells. Unfortunately, I didn't get any email at all after running this code. Previously, I received the email but the content was blank. I totally didn't get it.. I purely copied and paste your code on GAS editor. :( — dell, Apr 09 '21 at 07:07
Thx so much, @AlanWells. I finally saw the image in the background! — dell, Apr 09 '21 at 23:38

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

2 Answers2

Linked