Skip to content
This repository has been archived by the owner on Jan 2, 2023. It is now read-only.

Background color on pdf #3125

Closed
kamalsamra opened this issue Sep 15, 2016 · 5 comments
Closed

Background color on pdf #3125

kamalsamra opened this issue Sep 15, 2016 · 5 comments

Comments

@kamalsamra
Copy link

I want background color on multiple pages of pdf so for that i use background color on body but if content goes to second page then second page have background color till content.

@kamalsamra
Copy link
Author

I got a solution for this. Pankaj Jangid one of the wkhtmltopdf developer provide this solution to me.
For this we have to add css :

html {
    height: auto;
  }

  body {
    height: auto;
    background:#000;
  }

  p.content,.resumesheet {
    page-break-after: always;
  }

  p.spacer: {
    display: block;
  }

Here you find sample css and html file .

sample.zip

@rmcsharry
Copy link

FYI if you have margins, they remain white.

@angelo-moreira
Copy link

This doesn't work if we are instead loading dynamic content with lots of p tags :(

@pouyamn
Copy link

pouyamn commented Jun 30, 2021

I have struggled with wkhtmltopdf for a proper background image for many days, I even tried to use background-position to synchronize display of header footer and content backgrounds, but every approach I tried became a dead end after many attempts. Just use another tool to finish it up:
pdftk
py2pdf

@herrwalter
Copy link

herrwalter commented Aug 9, 2022

So, I ran across the same issue and stumbled op un this problem/solution and spent a lot of hours which I might save someone else fixing this.
In my case I got inspired by the example of "spacing".

So in my case we have a table that gets repeated. Sometimes on 1 page, sometimes on multiple pages. By adding a "filler" element after the repeating element (in our case, the table).
The filler got this styling:

        position: fixed;
        display: block;
        min-height: 100%;
        width: 210mm;
        background: #f4f2f1;
        margin: 0;
        padding: 0;

Position fixed is key here, along with the min-height. If it's on the first page, it will blend in with the background of the repeated element.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

5 participants