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

 

 

6 REPLIES 6
Highlighted
Super User III
Super User III

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

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

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

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

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

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
Super User III
Super User III

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

@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
Frequent Visitor

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

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

Highlighted
Super User III
Super User III

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

@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

Helpful resources

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

Upcoming Events

Experience what’s next for Power Automate

See the latest Power Automate innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Community Conference

Power Platform Community Conference

Find your favorite faces from the community presenting at the Power Platform Community Conference!

Top Solution Authors
Top Kudoed Authors
Users online (7,799)