You need to sign in to do that
Don't have an account?
Thais Carolyne Souza
How to put text over image in visualforce (contentType = "application) I'm with a vfp and generating it as .doc, but I'm not getting the image to be under a table, as if it were the table's background, whoever can give me any suggestions thanks, this was my last try
the result I want looks like this:
How to put text over the image in visualforce (contentType="application/msword")
How to put text over image in visualforce (contentType = "application) I'm with a vfp and generating it as .doc, but I'm not getting the image to be under a table, as if it were the table's background, whoever can give me any suggestions thanks, this was my last try
<style type="text/css" > @page Section1 { size:8.3in 11.7in; mso-title-page:yes; mso-footer:f1; mso-header:h1; mso-first-header: fh1; mso-first-footer: ff1; margin:0.0in 0.6in 0.0in 0.6in; mso-header-margin:0.3in; mso-footer-margin:0.3in; } div.Section1{ page:Section1; } .capa{ z-index: 0; background-image: } .textcapa{ z-index: 1; float: right; } </style> <apex:form > <body> <div class="section1" > <br/><br/> <div> <apex:image url="{!DocumentCapa}" width="650" height="550" styleClass="capa"/> </div> </div> <table cellspacing="0" cellpadding="0" align="left" width="100%" border="0" class="textcapa"> <tr><td>Caxias do Sul, <apex:outputText value="{0, date, d-MM-yyyy}"> <apex:param value="{!quoteObj.CreatedDate}"/> </apex:outputText> </td></tr> </table>
the result I want looks like this:
Hi Thais Carolyne Souza,
Please see the below code I think it will help you. To write the text over the image you can use the position property of CSS.
<apex:page applyBodyTag="false">
<head style = "align:top">
<style type="text/css">
@page:first {
size:landscape;
@bottom-left {
content: element(footer);
}
border : 0px;
margin-top:0 !important;
margin-bottom: 1.9cm;
margin-left:0 !important;
margin-right: 0 !important;
@bottom-left {
content: element(footer);
}
}
@page {
size:landscape;
margin-right: 12px;
margin-top:10px;
margin-bottom:10px;
margin-left: 12px;
border: 3px solid #21618C;
}
div.footer {
display: block;
position: running(footer);
}
ul.bullet li{
list-style-type: disc;
font-size:14px;
color:#4A4A55;
}
</style>
</head>
<div>
<apex:image style="position:absolute;" url = "https://res.cloudinary.com/dwtscjdcq/image/upload/v1615975612/e90e93a9-824c-4592-82ef-82afb8359277_tivco4.jpg" width="650" height="550"/>
</div>
<div style="position:relative;align:center;font: italic small-caps bold 12px/30px Georgia, serif;color:white;">This is a testing image!</div>
</apex:page>
The output will be like this:
I hope you find the above solution helpful. If it does, please mark it as Best Answer to help others too
Thanks and Regards,
Suraj Tripathi