You’re offline. This is a read only version of the page.
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/520334
https://powerusers.microsoft.com/t5/Building-Flows/Text-box-over-image-not-working-while-sending-automated-Emails/td-p/611391
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 ?
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.
#1
Tomac
986
Moderator
#2
stampcoin
699
Super User 2025 Season 2
#3
Riyaz_riz11
577
Super User 2025 Season 2
Share
Report
All responses (
Answers (
