Bacground Image not showing on pdf result

[kori22]

Hi Grover team, thanks for creating grover as pdf plugin converter from HTML, currently i get some issue for adding background image on dpf result, image not showing. this my code for html
`

<%= @member.user_company.user.fullname %>

<%= @member.learning_program.name %>

<%= current_company.name %>

<div class="row certificate-f">
	<div class="col-sm-6 certificate-d">
		<p class="text">Issued On</p>
		<p class="date">Saturday, 21 Oct 2022</p>
	</div>

	<div class="col-sm-6 certificate-s">
		<%= image_tag("/learning/sample-ttd.png", class: "c-sign-img") %>
		<p class="name"><%= @member.learning_program.signature_name %></p>
		<p class="structure">Direktur Operation</p>
	</div>
</div>

`

and this my code for generating PDF
`@certificate = @program.learning_certificate
html = render_to_string({
template: '/learnings/certificate.html.erb',
layout: '/layouts/pdf_layout.html.erb'
})

    style_tag_options = [
    ]

    binary_pdf = Grover.new(html, landscape: true, printBackground: true, style_tag_options: style_tag_options).to_pdf


    send_data(binary_pdf, filename: "learning-#{@member.learning_program.name}-#{@member.user_company.user.fullname}-.pdf", type: 'application/pdf') `

i got stuct this for 3 days, please advice for this case
thanks

[Andrew Bromwich]

Hmm not sure you've really provided enough information to go on here. Is the image you're expecting to display the /learning/sample-ttd.png image? Or are you trying to display some image using CSS?

If it is the sample-ttd.png image then that's not a background image and any display issue is likely more to do with other issues like specifying a page size/format (ie the content being rendered off the side of the page).

If it is an image rendered with CSS, then I suggest you read https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust Browsers will try and "save ink" when printing and not display background images by default. If you want to display an image when printing (and that's what exporting to a PDF is - to the browser) then you need to explicitly tell the browser to do so! If you're using the default browser then you'd add -webkit-print-color-adjust: exact !important; along with your background CSS definition. For Firefox it would be print-color-adjust: exact !important;