Re: How to overlap image/text over an image

Jean_9681 · ‎12-17-2021

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 -

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

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 ?

CFernandes · ‎12-18-2021

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.

Jean_9681 · ‎12-18-2021

@CFernandes
Even with this HTML the result is the same

How to overlap image/text over an image

Helpful resources

Join us for Microsoft Power Platform Conference

Register for a Free Workshop

Help make Flow Design easier