Force Background Color Printing on Firefox

Force Background Color Printing on Firefox

This is beginning to work in Firefox (at least version 48.0.2) with the "color-adjust" property.

td { 
  background: #000 !important;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

I see a minor bug or two in my particular project, but the background colors are showing up!

What is the alternate for -webkit-print-color-adjust in firefox and IE

As mentioned -webkit-print-color-adjust: exact is specific to WebKit browsers, including Google's Chrome and Apple's Safari; therefore the code should work adequately in those aforementioned browsers with perhaps slightly varied results (depending on your site/app styling).

There have been proposals to standardize this snippet to work universally for not just browsers but for different devices too. The code is simplified to: color-adjust. Similarly to the webkit-print-color-adjust property, the possible values are the same for the proposed property economy | exact.

If you want to use the property for printing purposes, simply use within a selector inside a @media print query.

For example:

@media print {
  body { color-adjust: exact; }
}

I cannot guarantee the widespread adoption on browsers for the drafted property, however it is currently working on the latest version of FireFox (at the time of writing, version 50.0).

[Source]

Firefox not printing white color

Also add !important to -webkit-print-color-adjust. This should work in all firefox, put it in @media print like this...

@media print {
  h2, h3 {
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    }
}

If still you want exact colour, you should check it in the printer, Appearance and Print Background Colors, by default it's off, look at the image, this worked for me, check it in your printer window setting as the below:

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).

How can I force browsers to print background images in CSS?

You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.

Background colour and Background Images not showing in print to PDF in IE and Mozilla Firefox

Check mozilla appearance settings
Open File->Page Setup and verify that "Print Background" is off. in mozilla

Use as the following html:

Red Background

Try these combinations

---

Related Topics