0

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

1 Answer 1

1

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>
1
  • Thanks for the tips, both your suggestions work for webpages but not for word...it doesn't even recognize with public images from the internet...I'll put my code here, maybe I did something wrong... ``
    – Souza
    Nov 24, 2021 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.