Css to print background color

CSS How to Print a Table with Background Color (Without Print Settings Changes)

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

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 to avoid HTML table background color from spanning across pages on print?

Found the answer myself, documenting it here for anyone facing this problem in the future.

Simply color the table by row in the css. ie.

tr 
background-color:#E2EFD9; //whatever color you want
 
>

Stylesheet for printing, background-color ignored

By default, most browsers ignore CSS background colours and images when printing. This can only be overridden by changing the setting in the browser, if the browser even has such an option (some don’t, as Quentin points out).

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.

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

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 !

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:

1. 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.)
2. Download the CSS variant of your choice, search and delete the offending code. (No CDN’s again.)
3. Use getbootstrap.com/customize to create a new variant — exclude «Print media styles» under «Common CSS». (Again, no CDN’s)
4. 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!

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

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.

1. Remove the !important from Bootstrap’s CSS and keep the !important in your CSS
2. 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.

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 !

Источник

5 Powerful Tips And Tricks For Print Style Sheets

In theory, you could use a CSS sprite to switch between different versions of the logo for print, but that would mean doubling the file size for potentially little benefit. Instead, I recommend using CSS filters (and their SVG equivalent, for Firefox) to invert the image just before it hits the printed page:

CSS3 filters do what you’d expect — invert the colors in header images, turning black to white and vice versa — but they only work in Chrome and Safari. To cover Firefox, we need a different approach — the equivalent filter written as a separate SVG file:

The workings of the feColorMatrix SVG filter are a little complex to cover here. Much more information can be found in the article “Applying Color Tints to Web Pages With SVG Filters and JavaScript” on Dev.Opera.

The result of printing either form of logo (i.e. alpha-masked PNG or solid-black background) is now this:

Conclusion

Due in part to the fact that printer use is not tracked by website analytics software and, thus, lacks strong metrics (although achieving this is possible, too, which we may discuss in a future article), print tends to be broadly ignored by Web developers. This is somewhat understandable, because most of the time we only read and browse pages online. As a result, developers tend to develop websites for the screens and devices in front of them, rather than for the printer at the other end of the office.

On the other hand, even if people only occasionally need to print something from the Web, it would be ideal if the page design adapted to the printer, just as modern websites adapt to various screen sizes and devices. Print should be considered another aspect of adaptive design, usability and accessibility, and an equally important part of Web development.

By treating print as another aspect of adaptive design, we fulfill the needs of more website users — and at the same time, save ink, paper and other resources, all of which are important aspects of sustainable design.

More Resources

A List Apart has a long and laudable history of supporting print style sheets through its articles and tutorials. While some of the following resources are now fairly old, they remain relevant to anyone who wishes to explore print as an equal partner in Web design.

• CSS Design: Going to Print, Eric Meyer (10 May 2002)
• Improving Link Design for Print, Aaron Gustafson (19 September 2005)
• Building Books With CSS3, Nellie McKesson (12 June 2012)

Further Reading

Источник

CSS How to print a table with background color (without Print settings changes)

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.

Solution 3

For chrome you can use this:

-webkit-print-color-adjust:exact; 

Or in print preview, set the checkbox ‘More settings->Background Graphics’

For Firefox, I couldn’t find anything to enable it using CSS. However, you can enable it as follow (If you don’t see the File, press Alt key once). ‘File->Page setup’ and set the checkbox ‘Print Background(color & images)’

Solution 4

a particularly ugly solution is to place position a .gif (or any form of vector graphic so the size can be changed) image in the table cell with height and width 100% then a negative z-index property.

Solution 5

I found @willert’s solution a bit consistent and easy. I have developed it further, hope it helps you guys.

table < margin-top: 20px; border-collapse: separate; border-spacing: 0px; font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; >table td, table th < background-color: transparent; z-index: 1; border-right: 0; border-bottom: 0; width: 150px; padding-left: 5px; overflow: hidden; height: 12px; >table th:before, table td:before < content: ""; padding: 0; height: 1px; line-height: 1px; width: 1px; margin: 10px -994px -996px -2px; display: block; border: 0; z-index: -1; position:relative; top: -6px; >table th:before < border-top: 999px solid #D6D6D6; border-left: 999px solid #D6D6D6; >table td:before < border-top: 999px solid #F9F9F9; border-left: 999px solid #F9F9F9; >td div.grid_3 < overflow: hidden; >table .row td

Источник

Don’t Rely on Background Colors Printing

At work I recently rolled out a new system for one of our clients, the Rick Wilcox Magic Theater. Their site is largely informational about them and their show, and a portal for selling tickets to their show online. As their theater is part of a vacation destination, people often buy tickets far in advance. The best method for presenting their show schedule is literally in a calendar format where people can see months of show dates at a single glace. This has always been a popular page for their customers to print out. For a long time, what we did was offer a PDF to download that we kept up to date with the current show dates. This allowed for some nice design control, but was very cumbersome to update all the time. So when rolling out the new version, I figured this was the ideal time to build in a page that was designed for printing, that kept itself up to date dynamically with the rest of the calendar. On the web, you can count on people’s monitors displaying color (thank god). We make good use of this when displaying the show calendar on the web. My first attempt a print stylesheet was great I thought. It set type in points, fit nicely onto one page, eliminated everything but the necessary information, and looked good doing it. All except one fatal flaw: it relied on color. There are two problems with this:

1. Not everyone has a color printer.
2. Backround colors and images don’t print by default.

Yes, it is a printer option your users could change, but you absolutely can’t count on your users knowing or doing that. You cannot control this from the web side (as far as I know).

Solution: figure out a way to go black and white

One solution would have been to go with a list-style presentation that wouldn’t need colors to distinguish show times. We were really liking the calendar-style presentation though, so what we needed was a way to distinguish show times in the limited confines of a day table cell without needing color.

CSS borders to the rescue!

Surely it’s not as pretty as the colored solution, but it certainly does the job!

Источник