Unable to print background-colors (css solution)?

Question

Im trying to learn how to enable print background-colors pages in chrome :

Take for example http://angularjs.org/

the main page is :

So If I click print ( ctrl+P) and mark the "background colors and images" - it does show the background colors which are future to be print :

All ok.

But If I navigate to another page http://docs.angularjs.org/tutorial/step_02 which also have background colors in it :

And when I try to print it - I see it in the preview pane without colors :

My question is : how did they do that ? ( or better , how can I make it print background colors ?)

I already read here that I should use -webkit-print-color-adjust:exact;

so I added it to the html via chrome developer toolbar , but it didn't help. ( when I clicked ctrl+p again

What should I change in the css in order for it to print also background colors ?

related info , searching for @media , found it under :

But I didn't find any related info there.

Answer 1

Ok, I think you didn't got what I meant in the comments, anyways, so it's pretty simple, say am having an element, like

<div class="blow"></div>

With a background set to tomato, so inorder to make that work, first of all you have to be sure that you have media print set, like

@media print {
  /* Declarations go here */
}

OR

<link rel="stylesheet" href="style.css" media="print" />

---

Now, what you have to declare is

-webkit-print-color-adjust: exact; in the property block, like

@media print, screen { /* Using for the screen as well */
    .blow {
        height: 100px; 
        width: 100px; 
        background: tomato;
        -webkit-print-color-adjust: exact; 
    }
}

Demo (Only for webkit browsers i.e Chrome/Safari)

In the above demo, you should be able to see the red block, even in the print preview window of your Chrome.

---

As you have commented, it works for me..

OR

---

Support for the same is dirty, for more information on the property, you can refer MDN

From MDN :

Body element backgrounds are not printed

Currently neither Chrome nor Safari print backgrounds of the body element. If this property is set to exact for the body element, it will apply only to its descendants.

Chrome clipped image bug

When background images are clipped (for example, when using background-image sprites), due to Chromium bug 131054, they will appear distorted when printed from the Chrome browser with -webkit-print-color-adjust: exact. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the element to which they are applied) are printed correctly.

External links

WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
CSSWG wiki: "print-background" - a proposal to standardize this property

Answer 2

Your background-color is probably overwritten. To achieve background-color for printing increase the specificity of your selector or add !important to the statement. Along with -webkit-print-color-adjust: exact; this should work for you:

@media print {
    .mycontainer {
        background-color: #000 !important;
        -webkit-print-color-adjust: exact;
    }
}