cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Frequent Visitor

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

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.

 

 

JaseelaMarshad_2-1593518355198.png

 

JaseelaMarshad_1-1593518193384.png

 

 

7 REPLIES 7
Highlighted
Super User III
Super User III

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 :winking_face:

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
Highlighted

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=""><!-- End Save for Web Slices -->


<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>

 

 
 

 

 

 

 

 

 

Highlighted

when viewed in browser

 

JaseelaMarshad_0-1593536288906.png

 

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

 

JaseelaMarshad_1-1593536377839.png

 

 

 

 

Highlighted

@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 :winking_face:

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
Highlighted

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

Highlighted

@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 :winking_face:

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
Highlighted
New Member

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>
')

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

Top Solution Authors
Top Kudoed Authors
Users online (16,247)