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]
How can I print background images in FF or IE?
Have you considered using a print stylesheet? This could allow you to do something like:
<div class="star">*</div>
/* media:screen */
.star {
background: ...;
overflow: hidden;
text-indent: 9999em;
}
/* media:print */
.star {
text-indent: 0;
}
or even easier:
<div class="star"><img src="./images/star.jpg" alt="*" /></div>
/* media:screen */
.star img {
visibility: hidden;
}
/* media:print */
.star img {
visibility: visible;
}
You can specify stylesheets browsers should use by supplying a media tag, either by css or on the link element:
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
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
Background color not showing in print preview
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).
background color is not working in Mozilla and IE
Add overflow: hidden
to your #header_main
class and it eliminates the issue.
So.. it would look like this:
#header_main{
z-index: 1;
border-top: 3px solid #FFF;
background: url("http://australian.webeteerprojects.com/wp-content/uploads/2015/04/header-back.png") no-repeat scroll center top / 100% 100% transparent;
overflow: hidden;
}
Related Topics
Web Testing for Ie. How Accurate Is Ietester
Bootstrap 3 Navbar Active Li Not Changing Background-Color
Convert Letter-Tracking Value Set in Photoshop to Equivalent Letter-Spacing in CSS
Using CSS Sprites and Background Position
Hexagonal Shaped Cells in HTML
Android Browser - Remove Outline Border When Anchor Is Focused
How to Style a List of Checkboxes
Can You Use Jekyll Page Variables in a Layout
CSS How to Use Pseudo-Class :Not with :Nth-Child
Styled Component Styles Are Disabled in Chrome Devtools
HTML Special Characters in CSS "Content" Attribute
CSS Media Queries to Hide and Show Page Elements
Adding a Dotted Line Trail After Menu Description
Rails Asset Pipeline Solution for Ie 4096 Selector/Stylesheet Limit