Wicked_pdf: Background image used as watermark not working on production

[taniadaniela]

I'm using a background image into body for watermark, it works perfect in development, but not in production server, this is the style:
body.watermark{
background-image: url(<%= asset_data_uri 'mylogo.png' %>);
background-repeat:repeat-y;
background-position: center 250px;
background-attachment:fixed;
background-size:100%;

}

the style is into a file.css.erb

I also have tried an absolute path like (also change the image format)
background-image: url('images/mylogo.jpg');

I've set the property no-background to false..

Bassically I've tried everything but still not working into production server.

I'm using wkhtmltopdf 0.12.1 (with patched qt), Rails 4.1.0.

[unixmonkey]

wkhtmltopdf will need a _full_ file path or URI, since it needs to gather everything from a static file.

Try with a full filesystem path:

background-image: url('<%= Rails.root.join('public','images','mylogo.jpg') %>');

or a full URI with host and protocol:

background-image: url('http://yourdomain.com/mylogo.jpg');

Or by base64-encoding your assets with a helper like this:

def asset_data_base64(path)
  asset = Rails.application.assets.find_asset(path)
  throw "Could not find asset '#{path}'" if asset.nil?
  base64 = Base64.encode64(asset.to_s).gsub(/\s+/, "")
  "data:#{asset.content_type};base64,#{Rack::Utils.escape(base64)}"
end

background-image: url('<%= asset_data_base64('images/mylogo.jpg') %>');

Let me know how it goes!

[taniadaniela]

@unixmonkey still not working on production server :(

[unixmonkey]

Are you putting quotes inside the url('') declarations? wkhtmltopdf can be picky about that.

[taniadaniela]

yes.. Is working on development, but not in production.. that's the rare part.

[unixmonkey]

Can you use debug: true, and paste the relevant parts of the html source?

[unixmonkey]

@taniadaniela Did you get things working?

[guillosaracco]

This worked for me in Rails 5 - in development and production after I changed my .css file to .css.scss. Hope it helps

background-image: asset-data-url("pdf_watermark.png");