0

I have a visualforce page document for which I want to place an full width image on the firstpage and on the rest of the document no image.

I tried the following down below but all the pages get a background. If I give the body of the firstpage a background I end up with an image cropped by the margins.

Is ther a way to define page 1 in @page CSS

Current Example:

 <head>
        <style type="text/css" media="print">
            @page {
            margin-top: 20%;  
            margin-bottom:13%;
            margin-right: 10%;
            margin-left:7%;
            size: A4;
            background-image:url({!$Resource.Voorblad}) ;
            background-repeat:no-repeat;
            background-size: 120% 120% !important;

            @top-right {
            content: element(header);
            }
            @bottom-right{
            content: element(footer);
            }
            }
            div.header {
            align:left;
            padding: 0px;
            position: running(header);
            }
            body{
            margin-left:0%;
            font-family:Arial, Verdana, sans-serif;
            font-size:90%;
            }     
            div.footer {
            height: 250px;
            display: block;
            padding: 5px;
            position: running(footer);
            margin:-2em -1em -12em;
            font-size:60%;
            color:#21789e;
            text-align: right;
            line-height:120%;
            }
            div.header {
            position: running(header);
            }
            .pagenumber:before {
            content: counter(page);
            }
            .pagecount:before {
            content: counter(pages);
            }
            table {border-collapse: collapse;
            padding: 0;
            margin-top:5px;
            margin-bottom:20px;
            }
            td{vertical-align:top;
            padding-left:
            0px;
            }
            table.details td {
            border: 2px solid #000;
            padding-left:5px;
            }
            .backgroundimg {
            background-image:url({!$Resource.backgroundtable}) ;
            background-size: 300px 100px;
            background-repeat:no-repeat;
            }
        </style>
    </head>
1
  • Disable standard style sheet, turn of lf html and body tag with page attribute, and add your own in html.should work. – Raul Jun 12 '18 at 11:03
0

I found a solution for this adding a @page :first definition the following way:

<style type="text/css" media="print">
                @page {
                margin-top: 20%;  
                margin-bottom:13%;
                margin-right: 10%;
                margin-left:7%;
                size: A4;

                @top-right {
                content: element(header);
                }
                @bottom-right{
                content: element(footer);
                }
                }
                div.header {
                align:left;
                padding: 0px;
                position: running(header);
                }
                body{
                margin-left:0%;
                font-family:Arial, Verdana, sans-serif;
                font-size:90%;
                }     
                div.footer {
                height: 250px;
                display: block;
                padding: 5px;
                position: running(footer);
                margin:-2em -1em -12em;
                font-size:100%;
                color:#000000;
                text-align: right;
                line-height:120%;
                }
                div.header {
                position: running(header);
                }
                .pagenumber:before {
                content: counter(page);
                }
                .pagecount:before {
                content: counter(pages);
                }
                table {border-collapse: collapse;
                padding: 0;
                margin-top:5px;
                margin-bottom:20px;
                }
                td{vertical-align:top;
                padding-left:
                0px;
                }
                table.details td {
                border: 2px solid #000;
                padding-left:5px;
                }
                .backgroundimg {
                background-image:url({!$Resource.backgroundtable}) ;
                background-size: 300px 100px;
                background-repeat:no-repeat;
                }
                @page :first {
                background-image:url({!$Resource.youresource}) ;
                background-repeat:no-repeat;
                background-size: 120% 120% !important;
                @bottom-right {
                }
                @top-right {
                }
                }
            </style>

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.