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.

Is the background present in the HTML output before converting with wkhtmltopdf? — lowerends, Aug 04 '14 at 12:42
Do you use an external css file ? And if so, is wkhtmltopdf able to load this style sheet ? — harco gijsbers, Nov 05 '14 at 15:49

score 24 · Accepted Answer · answered Sep 04 '15 at 17:12

24

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;

answered Sep 04 '15 at 17:12

Alyssa M

256
3
3

hi snippet dose not work do you mean here remove important or add it ? – shareef Oct 30 '17 at 15:42
1

@shareef 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. – DJ Grossman Apr 16 '18 at 14:42
@DJGrossman thanks , whats seems to be my problem solved by this https://stackoverflow.com/questions/34706302/no-display-of-image-as-a-pattern-in-svg-circle#comment86607971_34706302 – shareef Apr 17 '18 at 06:14

score 1 · Answer 2 · answered Apr 01 '19 at 14:02

1

Use This especially when you generate PDF from google App Script

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

answered Apr 01 '19 at 14:02

Wafik Ramzy

11
1

score 0 · Answer 3 · answered May 26 '18 at 11:07

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

score 0 · Answer 4 · answered Dec 18 '19 at 04:46

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.

score 0 · Answer 5 · edited Dec 27 '20 at 03:21

0

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;

edited Dec 27 '20 at 03:21

Dharman

30,962
25
85
135

answered Dec 27 '20 at 03:15

Alonso Iturbe

125
1
3
9

score 0 · Answer 6 · edited Jun 17 '21 at 13:05

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.

wkhtmltopdf div background color

6 Answers6