Put text over the image in visualforce (contentType=”application/msword”)

csshtmlms-wordvisualforce

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;
                }
                .bg {
                z-index: 0;
                background: url("https://www.oficinadeinverno.com.br/blog/wp-content/uploads/2019/01/oficina-de-inverno-aplicativos-de-edicao-de-fotos-por-do-sol.jpg");
                background-repeat: no-repeat;
                }
                
            </style>
        </head>
<apex:form >  
        <body>
<!--------- Capa ------------------------------------------------------------------------------------------------------------------------------------------------>
            <div class="Section1">   
                <div class="bg">
                    Test
                </div>
            </div>
            
            <div class="Section1">   
                <table class="bg"> 
                    <tr>
                        <td>table test r1</td>
                    </tr>
                    <tr>
                        <td>table test r2</td>
                    </tr> 
                </table>  
            </div>
            
            <table background="{!DocumentCapa}"> 
                <tr>
                    <td>First row</td>
                </tr>
                <tr>
                    <td>Second Row</td>
                </tr> 
            </table>

the result I want looks like this:

enter image description here

what am i getting

enter image description here

Best Answer

Two different approaches may work. There's a background attribute for <table> which is deprecated but Office may respect it:

<table background="{!DocumentCapa}"> 
    <tr>
        <td>First row</td>
    </tr>
    <tr>
        <td>Second Row</td>
    </tr> 
</table>

You should also try using CSS to apply a background to a div:

<style>
.bg {
    background: url("some-image.png");
    background-repeat: no-repeat;
}
</style>
<div class="bg">
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
</div>
Related Topic