Re: Text box over image not working while sending ...

JaseelaMarshad · ‎06-30-2020

I am trying to insert a text box over an image as part of sending Emails to users on their birthdays.

Text box over image not working while sending automated Emails from MS Flow

I am using power automate and however I try, the text box comes below the image.

The html code works fine when viewed in the browser. Please advise if there is anything I am missing.

I have saved the image in a document library in the same site. The screen shots are given below.

ChristianAbata · ‎06-30-2020

hi @JaseelaMarshad that is because you are using sharepoint to get the image see sharepoint contents some privacy policys please see my video to know more about images in html mails, I recomend you to use google drive

https://www.youtube.com/watch?v=S2tyiyKLXs4&t=12s

Did I answer your question? Please consider to Mark
my post as a solution! to guide others

Proud to be a Flownaut!

If you want you can follow me at www.christianabata.com

Quieres contenido en español? Síguenos en Power Automate LA

JaseelaMarshad · ‎06-30-2020

I have tried the same using an image from a public link. Still the same.

I am using the below code. It works fine when viewed as normal html in a browser but the text appears below image in power automated email

<html><head>

<title>Birthday Greeting Image 2020</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0
" topmargin="0" marginwidth="0" marginheight="0">
<img src="https://tinyjpg.com/images/social/website.jpg" width="714" height="539" alt="">

<body>
<h1 style="font-family : Levenim MT;color: #484946; position: absolute; left: 30px; top: 70px;">Dear Name,</h1>

<p style="font-family : Levenim MT; color: #484946; font-weight: regular; padding-top: 10; position: absolute; left:30px; top: 150px; width: 378px; height: 120px; font-size : 27px">We hope that today<br>
is the beginning of another<br>
wonderful year for you.</p>

<h1 style="font-family : Levenim MT;color: #484946; font-size: 40px;position: absolute; left: 30px; top: 290px;">Happy Birthday!</h1>

</body>

JaseelaMarshad · ‎06-30-2020

when viewed in browser

when viewed in automated email from power autimate - it shows as below

ChristianAbata · ‎06-30-2020

@JaseelaMarshad please try with this code

<html>
<head>
<title>Birthday Greeting Image 2020</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="https://tinyjpg.com/images/social/website.jpg" width="714" height="539" alt=""><!-- End Save for Web Slices -->
<h1 style="font-family : Levenim MT;color: #484946; position: absolute; left: 30px; top: 70px;">Dear Name,</h1>
<p style="font-family : Levenim MT; color: #484946; font-weight: regular; padding-top: 10; position: absolute; left:30px; top: 150px; width: 378px; height: 120px; font-size : 27px">We hope that today<br>
is the beginning of another<br>
wonderful year for you.</p>
<h1 style="font-family : Levenim MT;color: #484946; font-size: 40px;position: absolute; left: 30px; top: 290px;">Happy Birthday!</h1>
</body>
</html>

What I only did was format correct the html, you ad 2 body tags

Did I answer your question? Please consider to Mark
my post as a solution! to guide others

Proud to be a Flownaut!

If you want you can follow me at www.christianabata.com

Quieres contenido en español? Síguenos en Power Automate LA

JaseelaMarshad · ‎06-30-2020

I have tried with the provided Html code - it is still the same @ChristianAbata

ChristianAbata · ‎07-01-2020

@JaseelaMarshad please try this I did't saw you have some css

<html>
<head>
<title>Birthday Greeting Image 2020</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="https://tinyjpg.com/images/social/website.jpg" width="714" height="539" alt=""><!-- End Save for Web Slices -->
<h1 style="font-family : Levenim MT;color: #484946; left: 30px; top: 70px;">Dear Name,</h1>
<p style="font-family : Levenim MT; color: #484946; font-weight: regular; padding-top: 10; left:30px; top: 150px; width: 378px; height: 120px; font-size : 27px">We hope that today<br>
is the beginning of another<br>
wonderful year for you.</p>
<h1 style="font-family : Levenim MT;color: #484946; font-size: 40px;left: 30px; top: 290px;">Happy Birthday!</h1>
</body>
</html>

see position: absolute; is why you text is over image

Did I answer your question? Please consider to Mark
my post as a solution! to guide others

Proud to be a Flownaut!

If you want you can follow me at www.christianabata.com

Quieres contenido en español? Síguenos en Power Automate LA

pankajjain28 · ‎10-22-2020

I am creating html using Create File connector where i have one image and i am putting text over this image . When Html is created it is looking good . During conversion to pdf text is not coming on image it is going down to image . You can take any image to execute below html .

This is my code from create File connector

concat('<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: black;
}

.centered {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="CD.jpg" alt="Snow" style="width:100%;">
<div class="centered"><h1>My Custom Text</h1></div>
</div>
</body>
</html>
')

Text box over image not working while sending automated Emails from MS Flow

Helpful resources

Power Automate News & Announcements

Community Calls Conversations

Power Automate Community Blog