Background color not showing in print preview

I am trying to print a page. In that page I have given a table a background color. When I view the print preview in chrome its not taking on the background color property. So I tried this property:

-webkit-print-color-adjust: exact;
but still its not showing the color. http://jsfiddle.net/TbrtD/ 
.vendorListHeading < background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; > 
 
  
Date PO Number Term Tax Quote Number Status Account Mgr Shipping Method Shipping Account QA Reference End-User Name End-User's PO Tracking Number 
   
22 20130000 Jim B. 22 510 xxx yyyy [email protected] PDF 12/23/2012 Approved PDF 12/23/2012 Approved
1,306 2 2 gold badges 12 12 silver badges 21 21 bronze badges asked Feb 20, 2013 at 18:39 user2045025 user2045025 It looks like it works properly: jsfiddle.net/tDggR/2 I'm using chrome version 25 Commented Feb 27, 2013 at 23:31 jsfiddle.net/rajkumart08/TbrtD/1/embedded/result its not working here why – user2045025 Commented Feb 27, 2013 at 23:43 gosh! It works even in java8 webview engine Commented Aug 11, 2015 at 23:33 Check out my answer stackoverflow.com/a/40087869/4251431 Commented Oct 25, 2016 at 5:58

22 Answers 22

The CSS property 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 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; print-color-adjust: exact; >> @media print < .vendorListHeading th < color: white !important; >>

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

3,080 3 3 gold badges 12 12 silver badges 22 22 bronze badges answered Mar 6, 2013 at 17:08 purgatory101 purgatory101 6,754 1 1 gold badge 21 21 silver badges 21 21 bronze badges When opening the fiddle, I'm getting the Print preview failed. message in Chrome v47.0.2526.106 Commented Jan 13, 2016 at 15:07

Mozilla has marked this as non-standard, so the results are inconsistent and shouldn't be used in production sites developer.mozilla.org/en-US/docs/Web/CSS/…

Commented Feb 18, 2016 at 17:41

Yes, this works in Chrome. Bootstrap css was overriding it for me using print media. You can also preview and inspect print mode using the Rendering tab at bottom of Chrome Elements inspector. There's an option for Emulate CSS Media in case you want to see the override stack.

Commented Jun 27, 2017 at 21:25 Works for me with !important in background Commented Feb 26, 2019 at 19:39

That CSS property is all you need it works for me. When previewing in Chrome you have the option to see it BW and Color(Color: Options- Color or Black and white) so if you don't have that option, then I suggest to grab this Chrome extension and make your life easier:

The site you added on fiddle needs this in your media print css (you have it just need to add it.

media print CSS in the body:

@media print < body >

UPDATE OK so your issue is bootstrap.css. it has a media print css as well as you do. you remove that and that should give you color. you need to either do your own or stick with bootstraps print css.

answered Feb 28, 2013 at 17:29 Riskbreaker Riskbreaker 4,741 1 1 gold badge 24 24 silver badges 31 31 bronze badges – user2045025 Commented Feb 28, 2013 at 17:52

if thats the case make sure your bootstrap has webkit-print-color-adjust: exact; on your body is another way to check. in print media css of course

Commented Feb 28, 2013 at 18:10 its not working defie.co/testing/twitter-bootstrap-558bc52/docs/examples/… i gave it in this code – user2045025 Commented Feb 28, 2013 at 18:36

You did not add it in the print media as I stated in your html inner css: yout html line 1154: @media print < body . you need to add it in there.

Commented Feb 28, 2013 at 19:14 – user2045025 Commented Feb 28, 2013 at 19:23

Chrome will not render background-color, or several other styles, when printing if the background graphics setting is turned off.

This has nothing to do with css, @media, or specificity. You can probably hack your way around it, but the easiest way to get chrome to show the background-color and other graphics is to properly check this checkbox under More Settings.

enter image description here

answered Sep 27, 2017 at 21:28 82k 42 42 gold badges 209 209 silver badges 276 276 bronze badges

Hey, I've finally got around to making a fiddle jsfiddle.net/qm7shrvf for some reason, I cannot get chrome to render the green or red backgrounds in the print preview (I haven't tried to actually print it though) Thanks! (I did observe that the black background of jsfiddle.net does get rendered based on that chrome setting though)

Commented Mar 7, 2019 at 23:03

I just needed to add the !important attribute onto the the background-color tag in order for it to show up, did not need the webkit part:

background-color: #f5f5f5 !important;

answered Feb 19, 2015 at 16:59 11.3k 6 6 gold badges 74 74 silver badges 88 88 bronze badges That's fine..May i know the reason why the color is not shown without giving important @Flea Commented May 22, 2018 at 10:31 Well don't understand why this is happening but it solved my problem :-) Commented Jun 25, 2020 at 12:15

The reason is bootstrap.css, It has a media print css that is taking importance over your css. Following are solutions in this case: - A. override bootstrap media print styles by writing your styles in media print in your css file. - B. give !important to your original styles so that bootstrap media print css cannot override it. In Your case !important have more priority than bootstrap's media print css, That's the reason why !important worked in your case.

Commented May 7, 2021 at 11:56 It works only when we use style attr example: and the webkit is mandatory Commented Jun 21, 2021 at 13:11

Your CSS must be like this:

@media print < body < -webkit-print-color-adjust: exact; >> .vendorListHeading th
28.4k 38 38 gold badges 151 151 silver badges 243 243 bronze badges answered Aug 6, 2015 at 22:02 Miguel Angel Mendoza Miguel Angel Mendoza 1,312 9 9 silver badges 12 12 bronze badges I have used css in this way but does not work for me Commented Sep 28, 2020 at 11:03

This is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine, there is an alternative for Firefox, please try using also color-adjust: exact; for more info visit stackoverflow.com/questions/35625178/…

Commented Oct 28, 2020 at 18:50 It works only when we use style attr example: Commented Jun 21, 2021 at 13:18 Miguel you rock!! only person in this thread to mention Firefox, saving my day Commented Apr 22, 2022 at 20:24

TL;DR

Full answer

I tried all suggested solutions here (and in many other questions), such as applied background-color: #000 !important; both in stylesheet and inline, or set

@media print < * < color-adjust: exact !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; >>

, even combined them together, but nothing worked.

After hours of researching without any results, I recognized that the "bug" lost background-color only appears on table ( th , td ), but other HTML elements ( div . ) or other CSS attributes ( border-color . ) still works.

In the example below, I used React and makeStyles of @material-ui/core .

 > 
Col 1
 
Col 2
 
Col 3
 
   
>
Row 1 - Col 1
 
Row 1 - Col 2
 
Row 1 - Col 3
 
 
Row 2 - Col 1
 >
Row 2 - Col 2
 
Row 2 - Col 3
 
  
 
const useStyles = makeStyles(() => ( < thead: < textAlign: 'center', '& th:not(:last-child)': < padding: '0', '& >div': < padding: '.75rem', backgroundColor: '#D8D8D8 !important', >> >, tdGreen: < padding: '0 !important', '& >div': < padding: '.75rem', color: 'white', backgroundColor: 'green !important', >>, tdBlue: < padding: '0 !important', '& >div': < padding: '.75rem', color: 'white', backgroundColor: 'blue !important', >> >));

You can take the idea and convert it into pure HTML/CSS solutions.

Hope this can help anyone struggled with this issue!

answered Jan 17, 2023 at 6:36 968 1 1 gold badge 7 7 silver badges 13 13 bronze badges

FOR THOSE USING BOOTSTRAP.CSS, this is the fix!

I have tried all the solutions and they weren't working. until I discovered that bootstrap.css had a super annoying @media print that resets all your colors, background-colors, shadows, etc.

@media print

So either remove this section from bootstrap.css (or bootstrap.min.css)

Or override these values in the css of the page you want to print in your own @media print

@media print < body < -webkit-print-color-adjust: exact; >.customClass < //customCss + !important; >//more of your custom css >
answered Aug 15, 2018 at 15:18 8,927 10 10 gold badges 51 51 silver badges 67 67 bronze badges

If you are using IE then go to print preview ( right click on document -> print preview ), go to settings and there is option "print background color and images", select that option and try.

enter image description here

answered Mar 28, 2019 at 9:50 PADMAJA SONWANE PADMAJA SONWANE 139 1 1 silver badge 4 4 bronze badges

if you are using Bootstrap.just use this code in your custom css file. Bootstrap removes all your colors in print preview.

@media print < .box-text < font-size: 27px !important; color: blue !important; -webkit-print-color-adjust: exact !important; >>
answered Oct 23, 2018 at 4:33 Optimaz Prime Optimaz Prime 917 10 10 silver badges 11 11 bronze badges

Adding the important description after my settings helped. I had to have the -webkit-print-color-adjust set at body and then in each of my elements that needed color, I had to declare them important for this to work.

Commented Aug 13, 2020 at 19:12 This one is working still now, pretty useful. Commented Sep 20, 2023 at 18:35

If you are using bootstrap or any other 3rd party CSS, make sure you specify the media screen only on it, so you have the control of the print media type in your own CSS files:

answered Dec 16, 2015 at 9:51 Vyacheslav Cotruta Vyacheslav Cotruta 772 7 7 silver badges 13 13 bronze badges

Remember, if you add media="screen" to bootstrap css, then every style from bootstrap will be striped out.

Commented Mar 17, 2021 at 14:42

Are your sure this is a css issue ? There are some posts on google around this issue: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

It may be related to the print process. On safari, which is webkit also, there is a checkbox to print background images and colors in the printer dialog.

384k 77 77 gold badges 659 659 silver badges 1.1k 1.1k bronze badges answered Mar 6, 2013 at 17:09 388 4 4 silver badges 13 13 bronze badges

Use the following in your @media print style sheet.

Here are a couple things to note:

See my fiddle for a more detailed demonstration.

24.5k 17 17 gold badges 119 119 silver badges 178 178 bronze badges answered May 24, 2013 at 16:08 Pete Fecteau Pete Fecteau 302 3 3 silver badges 5 5 bronze badges

There's a style in the bootstrap css files under @media print that has color and background styles labeled !important, which remove any background colors on any elements. Kill those two pieces of css and it will work.

Bootstrap is making the executing decision that you should never have any background color in prints, so you have to edit their css or have another !important style that is a higher precedence. Good job bootstrap.

answered May 31, 2016 at 15:38 Taugenichts Taugenichts 1,345 12 12 silver badges 20 20 bronze badges

I used purgatory101's answer but had trouble keeping all colours (icons, backgrounds, text colours etc. ), especially that CSS stylesheets cannot be used with libraries which dynamically change DOM element's colours. Therefore here is a script that changes element's styles ( background-colour and colour ) before printing and clears styles once printing is done. It is useful to avoid writing a lot of CSS in a @media print stylesheet as it works whatever the page structure.

There is a part of the script that is specially made to keep FontAwesome icons color (or any element that uses a :before selector to insert coloured content).

Compatibility: works in Chrome, I did not test other browsers.

function setColors(selector) < var elements = $(selector); for (var i = 0; i < elements.length; i++) < var eltBackground = $(elements[i]).css('background-color'); var eltColor = $(elements[i]).css('color'); var elementStyle = elements[i].style; if (eltBackground) < elementStyle.oldBackgroundColor = < value: elementStyle.backgroundColor, importance: elementStyle.getPropertyPriority('background-color'), >; elementStyle.setProperty('background-color', eltBackground, 'important'); > if (eltColor) < elementStyle.oldColor = < value: elementStyle.color, importance: elementStyle.getPropertyPriority('color'), >; elementStyle.setProperty('color', eltColor, 'important'); > > > function resetColors(selector) < var elements = $(selector); for (var i = 0; i < elements.length; i++) < var elementStyle = elements[i].style; if (elementStyle.oldBackgroundColor) < elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance); delete elementStyle.oldBackgroundColor; >else < elementStyle.setProperty('background-color', '', ''); >if (elementStyle.oldColor) < elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance); delete elementStyle.oldColor; >else < elementStyle.setProperty('color', '', ''); >> > function setIconColors(icons) < var css = ''; $(icons).each(function (k, elt) < var selector = $(elt) .parents() .map(function () < return this.tagName; >) .get() .reverse() .concat([this.nodeName]) .join('>'); var if (id) < selector += '#' + id; >var classNames = $(elt).attr('class'); if (classNames) < selector += '.' + $.trim(classNames).replace(/\s/gi, '.'); >css += selector + ':before < color: ' + $(elt).css('color') + ' !important; >'; >); $('head').append(''); > function resetIconColors()

And then modify the window.print function to make it set the styles before printing and resetting them after.

window._originalPrint = window.print; window.print = function() < setColors('body *'); setIconColors('body .fa'); window._originalPrint(); setTimeout(function () < resetColors('body *'); resetIconColors(); >, 100); >

The part that finds icons paths to create CSS for :before elements is a copy from this SO answer