How to get a text block over an image in an html file and use that as GMail email body to send an email?
Question
I am creating an automated email using google script with email body as the html content. Below is my script:
main.gs
function testSchemas() {
var htmlBody = HtmlService.createHtmlOutputFromFile('template').getContent();
MailApp.sendEmail({
to: "user@gmail.com",
subject: "Test Email",
htmlBody: htmlBody
});
}
template.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://drive.google.com/uc?export=view&id=[fileID]" alt="TEST" style="width:100%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
</body>
</html>
When I run this code, the text that is supposed to appear over the image comes below the image in the email. Is there anything I am missing here?
Kindly suggest.
Sample output:
2 answers
solution1
0 2019-12-28 17:39:24
Position absolute isn't supported by many email clients including gmail so it isn't safe to use it if you plan to send to gmail users.
There are many discussions on this subject like this one email template position absolute?
solution2
0 2019-12-28 17:49:11
You can add the image to the body tag using the style - background image attribute, an opacity attribute to make the text appear over the image, and center the background.
<body style="background-image: url(https://i.imgur.com/40mRGbt.png);background-repeat: no-repeat;background-position: center;opacity:0.5">
The documentation for what CSS Gmail supports is at: https://developers.google.com/gmail/design/reference/supported_css
Gmail will not process CSS in a <style> tag. All CSS in a Gmail email must be in each HTML tag, using style attribute.
The full html code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-image: url(https://i.imgur.com/40mRGbt.png);background-repeat: no-repeat;background-position: center;opacity:0.5">
<div class="container">
<!-- <img src="https://drive.google.com/uc?export=view&id=[fileID]" alt="TEST" style="width:100%;"> -->
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
<p>What a beautiful sunrise</p>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.