+ Start a Discussion
Thais Carolyne SouzaThais Carolyne Souza 

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:
the result I want looks like this:
Suraj Tripathi 47Suraj Tripathi 47

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:

User-added image

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