wkhtmltopdf div background color

Question

I am using the wkhtmltopdf on my amazon ubuntu instance to generate an invoice's PDF. The page is PHP. Everything is working fine except the background color of the html div tags. The border color is working fine. Is there any setting in wkhtmltopdf to enable printing background color of the div tag?

I have tried bgcolor, css and inline style, also I have checked converting the page in Table structure but none of these helped.

Luedtke

Is the background present in the HTML output before converting with wkhtmltopdf? – Subscapular

Yes, the background is there on the page. – Luedtke

Do you use an external css file ? And if so, is wkhtmltopdf able to load this style sheet ? – Paunch

Answer 1

I had this issue as well, and the css was right in the same HTML file. The trick for me ended up being the somewhat-mysterious "!important" at the end of the background-color tag like so:

background-color: #f2f4f7 !important;

Simulation

hi snippet dose not work do you mean here remove important or add it ? – Inheritor

@Inheritor Add, not remove. If you have a div that is styled with a background color but it is not happening in the resulting PDF, try adding !important to the background color declaration and that should work. It is odd. – Shantell

@DJGrossman thanks , whats seems to be my problem solved by this #34706802 – Inheritor

Answer 2

Use This especially when you generate PDF from google App Script

@media print 
{
.class 
{
     background-color: #1a4567 !important;
     -webkit-print-color-adjust: exact;
}
}

Fetishist

Answer 3

if you can work around it by adding !important to the CSS rule then you have a @media print rule getting in the way

for instance, in my case, the CSS rules I had included:

@media print {
    background: transparent !important; /* <= DISABLES backgrounds */
}

among many other @media print rules with !important that I wanted to remove for my PDF to get some styles of the targeted HTML

Altricial

Answer 4

I had the same problem, with border color was working but with background color not.

The only thing that worked for me was to set the background-color directly in the div. For example:

<div style="background-color: rgb(81, 130, 187) !important;"></div>

Don't forget to use the !important at the end.

Pedestrian

Answer 5

I had the same problem, but in my case the solution was to specify the color in rgba instead of hex. No need to specify within HTML.

background-color: rgba(249, 203, 156, 0.71);

instead of

background-color: #F9CB9CB5;

Ache

Answer 6

For anyone else facing this issue not solved by accepted answer - It may be possible that you specified following no-background configuration -

[
    'binary' => 'D:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe',
    'commandOptions' => [
        'print-media-type',
        'page-size' => 'Ledger',
        'no-background'
    ]
]

Remove 'no-background' config and the background color will show up.

Passe