cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Jean_9681
Helper II
Helper II

How to overlap image/text over an image

I am trying to add a text/image(logo) to a picture using PowerAutomate  similar to this flow 
I have my HTML in a compose action and i am able to convert it to an HTML file, this HTML file shows the image and the text/logo at the right/correct spot.
 

however after the convert action the text and logo shows out side the image..

Similar thread with no success
https://powerusers.microsoft.com/t5/Building-Flows/Unable-to-embed-image-and-text-over-an-image/td-p...
https://powerusers.microsoft.com/t5/Building-Flows/Text-box-over-image-not-working-while-sending-aut...

 Screenshot of my current flow - 

Jean_9681_0-1639794913312.png



Text shows outside the image- its suppose to be in the center as per the HTML code/tag

Jean_9681_2-1639795720482.png

 

 

HTML in Compose


'<!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%);
}
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }

</style>
</head>
<body>
<div class="containerdiv">
<img class="centered" src="@{concat('data:', body('Get_file_content_using_path')?['$content-type'] ,';base64,',body('Get_file_content_using_path')?['$content'])}" alt="Text" style="width:100%;">
<div class="overlay"><h1 style="font-family : Levenim MT;color: #484946; font-size: 40px;">This is my text!</h1></div>
</div>
</body>
</html>

 

 

 


Any suggestions ? 

 

2 REPLIES 2
CFernandes
Super User
Super User

Hey @Jean_9681 

 

Try the HTML below -

 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
}
</style>
</head>

<div class="example">
<img class="background-image" src="https://ik.imagekit.io/ikmedia/accessories_banner.jpg?tr=w-1200,h-400">
<div class="overlay">
Multi-line <br/>text
</div>
</div>

</body>
</html>

 

Reference - https://imagekit.io/blog/css-image-overlay/ \

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

 

P.S. take a look at my blog here and like & subscribe to my YouTube Channel thanks.

 

@CFernandes 
Even with this HTML the result is the same 

Jean_9681_0-1639860496556.png

 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

MPA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

Power Automate Designer Feedback_carousel.jpg

Help make Flow Design easier

Are you new to designing flows? What is your biggest struggle with Power Automate Designer? Help us make it more user friendly!

Users online (3,525)