Bootstrap print CSS removes background color
Unfortunately there is not a good answer to your question - but maybe if you understand the why's then you can choose a way forward.
Why?
It's true that Bootstrap uses the @media print { * { color: $fff; background: transparent; }}
-- but there is a very solid reason. This bit of code is actually derived from the normalizer.css project (by a then college of @mdo 's, @necolas) - it's intent is to make all browsers behave the same. These guys chose to "normalise" the css for a very good reason:
With most browsers one can choose to include or exclude background color, so the behaviour is not standard across even the same browser. Imagine for a sec a website with very dark background with white text - when printing with backgrounds off, it will look like you're printing nothing - when actually you're printing white text on no (white) background.
There was no way to account for all the different uses of color, so they choose to go black (font) and white (background, actually 'transparent'). Even the choice of black was well thought of -- its a better print solution, as most color printers have more black "ink/toner" (more economical) and they don't need to mix color to make black (so faster).
Remember that Bootstrap is also a "framework" - so a starting point if you will - and kudos to @mdo and @necolas for having the foresight to think of this in terms of establishing a predictable baseline. (No, I don't know them.)
Nope...
So the thinking here is: "what if we could 'go back' and unset this. Unfortunately CSS does not work like that - yes browsers load the CSS declarations in a "queue" where the last declaration wins (LIFO, or last-in-first-out), but I'm not aware of a way to remove this stack. So CSS developers just add more to the end...
So one would assume that we can go back that way --- add a * { background-color: inherit }
. Problem is that inherit
reverts to the parent property, but *
is the root, so it has nothing to revert to. Same goes for initial
!
Maybe!
So we're left with 4 options, none of them is what you where hoping for, but it is what it is. In order of difficulty:
- Download the BS (less or sass) source, edit the offending code, and then compile it. (You need to use a local copy, CDN's will not work.)
- Download the CSS variant of your choice, search and delete the offending code. (No CDN's again.)
- Use getbootstrap.com/customize to create a new variant - exclude "Print media styles" under "Common CSS". (Again, no CDN's)
- Override the specific items who's color you want to print: e.g.
@media print {
.alert-danger {
color: yellow !important;
background-color: red !important;
}
}
CDN's copies of BS will now work, but then you have the problem of the user possibly not printing backgrounds and having the output white (yellow in the e.g.) on white!
Finally
Well I hope learning the why's was at the very least a way of you thinking of a workaround. General rule of thumb I follow is that when printing, the background is (should be) always white. When constrained that way you start thinking of novel ideas, like exclamation icons around the text that only "print" (@media only screen { .hidden-screen { display: none; }}
)
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.
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.
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).
Bootstrap Print Overrides CSS
Edited based on comment:
You can add !important
using JavaScript's style.setProperty()
method in 2 ways:
- Pure JS:
document.getElementById()
. - jQuery hybrid: Wrap it inside jQuery's
.each()
.
Both examples below:
$('#filePrintPreview').html("TEST");//way 1: pure JS exmpledocument.getElementById('filePrintPreview').style.setProperty('color', 'red', 'important');//way 2: wrapped inside jQuery's each() example$('h3').each(function() { this.style.setProperty('color', '#12FF12', 'important');});
@media print { .test { background-color: #1a4567 !important; -webkit-print-color-adjust: exact; }}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="col-md-12 test"> <h3>Heading</h3> <div class="box no-border shadow" id="filePrintPreview" style="padding: 2px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-line;"> </div></div>
<button class="btn btn-flat btn-primary btn-sm" style="margin-top:15px;" onclick=" window.print();">Print</button>
background color disappears when printing using window.print()
Adding -webkit-print-color-adjust: exact;
to css page solved the problem in chrom , and color-adjust: exact;
to solve the problem in mozilla firefox !
How can I print colors when printing a page in bootstrap?
Found the solution shortly after posting the question. The following line in bootstrap.css needs to be changed.
@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}
For my purposes I removed the color:
and background:
properties.
How do I stop bootstraps table background color setting for print media over riding my class setting
Oh yeah, just noticed something...
CSS has this pain-in-the-butt preference thing where the larger your selection tree, the more priority it has.
For example,table > td
takes priority over just td
In Bootstrap's CSS, the td
is selected as .table td
, but your selector is just .bg-color1
or .bg-color2
There are two ways to fix this.
- Remove the
!important
from Bootstrap's CSS and keep the!important
in your CSS - Increase the length of your selector, something like
.table .bg-color1
I have no evidence to prove this, but this is what I've noticed.
Related Topics
Declare Variable in a Play2 Scala Template
Options with Display:None Not Hidden in Ie
How to Get a Web Page Header/Footer Printed on Every Page
How to Choose Between Get and Post Methods in HTML Forms
Deploying Just HTML, CSS Webpage to Tomcat
How to Align Flexbox Columns Left and Right
Stop CSS Transition from Firing on Page Load
Is It Alright to Use Multiple H1 Tags on the Same Page, But Style Them Differently
Min-Height Does Not Work with Body
Flexbox: Wrong Width Calculation When Flex-Direction: Column, Flex-Wrap: Wrap
How to Make a Line Before and After My H1 Tag
Base64 Encoded Image Is Not Showing in Gmail
Do I Need a "/" at the End of an <Img> or <Br> Tag, etc.