How to use background image inside CSS for wicked_pdf

Question

I'm using the wicked_pdf plugin with a rails 3.0 project. I want to define background with image inside css file.

Here is my css code

.thumb-image {
    background: url(http://localhost:3000/images/pdf/ideathumbbg.png) no-repeat left top;
    width: 1979px;
    height: 946px;
    position: relative;
    padding: 54px;
    text-align: center;
    margin-bottom: 15px;
}

This does not find the ideathumbbg.png and it does render ideathumbbg.png in the pdf generated.

Is it possible to use the wicked_pdf_image_tag helper inside a css file? or any other best solution for this problem?

Answer 1

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.

Answer 2

I solved this by using the SASS asset-data-urlrelative-asset-path, maybe you can use something like this:

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