CSS Media Type Print Using Background-Color 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).

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.

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.

Front end printing emulator `paper.css` not working with background color

Make sure you have the More settings > Options > Background graphics option checked in the Chrome print dialog.

Print HTML table background color with Bootstrap

Bootstrap explicitly sets the background to white for printing--this is in their CSS:

@media print { 
    .table td, .table th { 
        background-color: #fff !important; 
    } 
}

Write your override like theirs and you should be good to go.

---

Related Topics