打印带有背景图像的 HTML 页面时未显示文本

Question

I am printing an HTML image that has a background url with some formatted text on the it. However, I noticed that when I click on print preview, it only shows the background image without the text that are dynamically placed on it.

<div class="certificado_pagina">
        <div class="certificado_conteudo">
            <!-- dynamic content goes here -->
        </div>
    </div>

This class selector (certificado_pagina) inherit the background image url.

I have add the css below to the body tag but still not showing the text on the background image

@media print {
    body {
        content: url(../images/certificate.png);
        color: #000;
    }
}

Please help. Thanks

Answer 1

If you want the entire page ro have background image, you have to specify background image on the body element like so:

<style>
body {
    background-image: url(...);
}
</style>