Scenario :

I'm generating the Report in pdf format using WKHTMLTOPDF tool, Every thing works fine except the background image is not rendering in generated PDF.While it is showing properly in HTML format.

What i have tried :

• I have changed the format of background image from png to jpg but no Luck.

• I have used the --javascript-delay 5000 code in WKHTMLTOPDF, for waiting to render the image but still no luck.

Strange Behavior :

I have one more different image with background and it is showing properly.

My Question :

What is wrong with this scnerio, As the other image is showing properly with background but not this one ? Please help me .Thanks.

Updated :

I'm executing the cmd

My Code: wkhtmltopdf  sample.pdf

And while executing getting the warnings :

QFont::setPixelSize: Pixel size <= 0 (0)

Used CSS :

background: transparent url(images/abc.png) no-repeat scroll 0% 0% / 100% 100%;

Scenario :

I'm generating the Report in pdf format using WKHTMLTOPDF tool, Every thing works fine except the background image is not rendering in generated PDF.While it is showing properly in HTML format.

What i have tried :

• I have changed the format of background image from png to jpg but no Luck.

• I have used the --javascript-delay 5000 code in WKHTMLTOPDF, for waiting to render the image but still no luck.

Strange Behavior :

I have one more different image with background and it is showing properly.

My Question :

What is wrong with this scnerio, As the other image is showing properly with background but not this one ? Please help me .Thanks.

Updated :

I'm executing the cmd

My Code: wkhtmltopdf http://example./renderpdf sample.pdf

And while executing getting the warnings :

QFont::setPixelSize: Pixel size <= 0 (0)

Used CSS :

background: transparent url(images/abc.png) no-repeat scroll 0% 0% / 100% 100%;

• javascript
• php
• pdf-generation
• background-image
• wkhtmltopdf

• Just in case, you are sure the path to the background is correct? – faerin Commented Sep 15, 2015 at 7:59
• @entiendoNull , yes I'm pretty much sure that image path is correct and it is rendering properly on HTML. – Harshal Commented Sep 15, 2015 at 8:01
• Try adding the plete path to where the image file is located instead of a relative one and see if that helps... – faerin Commented Sep 15, 2015 at 8:04
• @Downvoters , Please explain the reason. – Harshal Commented Sep 15, 2015 at 8:24
• @entiendoNull I'm giving the exact relative path like http://example./assets/images.abc.png – Harshal Commented Sep 15, 2015 at 8:29

2 Answers 2

I finally figured it out; the problem was with my CSS.

I changed it from:

background: transparent url(http://example./abc.png) no-repeat scroll 0% 0% / 100% 100%;

to:

background:url(http://example./abc.png) no-repeat; background-size:100%` 100%;

Does your image file name contain whitespaces? If yes, use rawurlencode() function on your file name (not your plete file path) and try.