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

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
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Users online (3,746)