wkhtmltopdf background-image problems

Question

I'm using wkhtmltopdf in a Rails app and trying to set a border by placing an image with just borders as the background-image for another. (I'm doing this because box-shadow is not working for wkhtmltopdf). This shows up fine in the HTML view, but in the pdf it doesn't work. My CSS is here:

.box{ 
  background-image: url('/assets/posts/background_border.jpg'); 
  background-repeat: no-repeat; 
  height: 100px; 
  width: 100px; 
}

Please let me know how to solve this. Thanks!

Sphere

Answer 1

Make the URL for the background image absolute.

background-image: url('http://localhost:8080/assets/posts/background_border.jpg'); 

Carmelacarmelia

Answer 2

I had the same problem and finally i solved it. I get

 Exit with code 1 due to network error: ContentNotFoundError

from wktohtml

To solve just remove quote from url declaraion, absolute url is also required. So change

 background-image: url('/assets/posts/background_border.jpg')

To

  background-image: url(http://absolute_url_to_image_without_quote)

Palla

Answer 3

This may have something to do with the image not being loaded at the time the PDF is being generated. I use the command line tool and circumvented the problem using ie.:

--javascript-delay 3000

NB: This workaround has successfully been tested with relative and absolute paths with or without protocol + domain name.

See possible relating GitHub issue "wkhtmltopdf background-image not working".

Bagger

Answer 4

You must provide absolute path for the resources. like /Users/projectname/assets/posts/background_border.jpg in your case.

Cannibalize

Answer 5

Use page option: print-media-type

http://wkhtmltopdf.org/usage/wkhtmltopdf.txt

Hagiocracy