Wicked_pdf: background images not work in .css file for wicked_pdf

[sunnybogawat]

in my css file for pdf i have following css class having background image

.thumb-image {
background: url(/home/sunny/Projects/Tinkby-EC2/tinkby-ec2-working/public/images/pdf/ideathumbbg.png) no-repeat left top;
width: 1979px;
height: 946px;
position: relative;
padding: 54px;
text-align: center;
margin-bottom: 15px;
}

I have given absolute path for background but still it is not showing in generated PDF? is there any better way to show background images in wicked_pdf through css.

I have posted same question on stackoverfolw community with following URL
http://stackoverflow.com/questions/11649530/how-to-use-background-image-inside-css-for-wicked-pdf

[unixmonkey]

Wkhtmltopdf cannot render png or gif images as backgrounds:

http://code.google.com/p/wkhtmltopdf/issues/detail?id=544

Try converting your background image to a jpg.

[sunnybogawat]

Hi unixmonkey,

I have converted all the images to jpg format and tried it but still they are not showing inside pdf. then debugging code i have realized that the show_background_images option set to be true for displaying images.

[maurodias]

@sunnybogawat Dude, where can i config this to true, the same is happening here, jpg css backgrounds are not being printed... I've created a wicked_pdf.rb in initializer, and did this:

WickedPdf.config = {
  :no-background => false,
  :image => true
}

[itsazzad]

Still no solution?

[unixmonkey]

This is working for me without issue. It is a little tricky though, since if you can see it from the PDF, you can't see it from the HTML, and vice versa.

I've pushed an example of how I got it to work here

You can see it in action here:
https://wicked-pdf-issues.herokuapp.com/pages/issue_124
https://wicked-pdf-issues.herokuapp.com/pages/issue_124.pdf

[itsazzad]

@unixmonkey Sorry I could not understand what you have done to solve it.
Can you please specify here the key points?

[unixmonkey]

@itsazzad

This is the important bit:

<% if params[:format] == 'pdf' %>
  /* full path to file on filesystem is necessary for wkhtmltopdf to read */
  background-image: url('file://<%= Rails.root.join('app/assets/images/colorful-triangles.jpg') %>');
<% else %>
  /* However, most browsers will not allow file:// url access from an HTTP request */
  background-image: url('<%= asset_path('colorful-triangles.jpg') %>');
<% end %>

The file:// path will expand to something like /users/itsazzad/code/rails_project/app/assets/images/colorful-triangles.jpg

then wkhtmltopdf will be able to read it.

[itsazzad]

I could make my one working by not specifying any print media.
So I removed --print-media-type
and its working :+1:

[yangjindong]

This issue relates to the image file url in background-image. we can use below method to resolve this issue:

background-image: asset-data-url('ideathumbbg.png')

According a comment in the stackoverflow @sunnybogawat created.