Is it possible to change the background color of an element for printing?

Question

Is it possible to change the background of an element in the print style sheet? I have the following code:

<td valign="top" bgcolor="#dddddd" class="cinza" nowrap="">Seu Nome<br>
<div align="right" class="campo">Eu Sou o João</div>
</td>

• I used the bgcolor="#dddddd", didn’t work out.
• I used it as a style <style>:

---

<style media="print">
.cinza{background-color:#dddddd !important;}
</style>

It didn’t work either.

It is possible or not to change the background color of an element for printing?

Answer 1

You can use Media Query to apply specific styles for printing:

/*CSS para impressão*/
@media print {
  body { -webkit-print-color-adjust: exact;}
   .cinza{ background-color:#dddddd  !important; }
}

Answer 2

Well, if a user has marked in the options something like "Print images and background colors" (will depend on the browser), no CSS will overwrite this. So always take that into account.

But there are some solutions, for the various problems that may appear, that can help in these various cases:

body {
  -webkit-print-color-adjust: exact;
  background-color:#dddddd  !important;
}