background color disappears when printing using window.print()

Question

i'm trying to print a page in angulat , using window.print(); , everything works fine, all other css works fine, the only matter is that the background color is not displaying in the printable documents, i've attached a StackBlitz exemple, so : has anyone encountered this problem before ? , if yes what is the solution , Thanks.

StackBlitz Exemple from here

Note : I did a lot of research on stackoverflow and other forumes , and no one is talking about this problem.

Printable File HTML :

<div class="page-container">
<div class="title-container">Invoice Title</div>
<div class="body-container">
  This is what I'm going to print, everything works fine , but the background color never changes , no matter what i add to css file
</div>
</div>

CSS of the page :

.page-container{
  width: 100%;
  background-color : rgb(216, 23, 23);  // as you can see , background not working 
}
.title-container{
  font-size: 24px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 20px;
  border: 2px blueviolet solid;
  color: rgb(228, 0, 228);
  background-color : rgb(221, 0, 0) !important;// not working also
}
.body-container{
  background : #000; // not working 
}

Result :

Your printer is set up to save ink and not print backgrounds. — epascarello, Apr 14 '20 at 16:19
https://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview — Nikhil Aggarwal, Apr 14 '20 at 16:21

Aymen TAGHLISSIA · Accepted Answer · 2020-04-14T17:14:48.467

6

Adding -webkit-print-color-adjust: exact; to css page solved the problem in chrom , and color-adjust: exact; to solve the problem in mozilla firefox !

edited Apr 14 '20 at 17:14

answered Apr 14 '20 at 16:23

Aymen TAGHLISSIA

1,675
13
30

background color disappears when printing using window.print()

1 Answers1