Print Background Colours in Chrome

Print Background colours in Chrome

You adjust in the browser, whether the background colors and images are printed. See your browsers printing options.

Google Chrome offers this feature starting from version 26 (march 2013).

Also starting from version 17, Chrome allows changing the background print behavior programmatically by using -webkit-print-color-adjust:exact; in the element CSS to print the background.

Background color not showing in print preview

The Chrome CSS property -webkit-print-color-adjust: exact; works appropriately.

However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media print and @media screen.

Often times just setting up some extra @media print CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.

In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other CSS with higher specificity.

While I do not endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Here is the fiddle (and embedded for ease of print previewing).

Chrome print to PDF with background colors

Looks like the folloing code snippet in Bootstrap css causing this issue, I just removed it for mine .

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; // Black prints faster: h5bp.com/s
        box-shadow: none !important;
        text-shadow: none !important;
    }

Unable to print background-colors (css solution)?

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

Print css backgrounds in safari/chrome?

Printing background images is a browser-dependent feature. FF and IE have it but you cannot force it otherwise via sourcecode.

CSS @media print issues with background-color;

IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

Once that is set so it will print background colours and images, what you have there will work.

It is found in different spots.
In IE9beta it's found in Print->Page Options under Paper options

In FireFox it's in Page Setup -> [Format & Options] Tab under Options.

---

Related Topics