Related
I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in #media print.
#media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Everything else works, I can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.
To enable background printing in Chrome:
body {
-webkit-print-color-adjust: exact !important;
}
Edit:
For Chrome, Safari and Firefox:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
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.
Got it:
CSS:
box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
(If the PDF-printer output file is to be believed..?)
Only tested in Chrome + Firefox on Ubuntu...
Try this, it worked for me on Google Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; alone is Not enough
you have to use !important with the attribute
this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag
and this is printing preview on chrome before adding !important
now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule
Two solutions that work (on modern Chrome at least - haven't tested beyond):
!important right in the regular css declaration works (not even in the #media print)
Use svg
If you are looking to create "printer friendly" pages, I recommend adding "!important" to your #media print CSS. This encourages most browsers to print your background images, colors, etc.
EXAMPLES:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this hack:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
Activate it by adding the class to your element:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.
Notice this hack won't work on elements other than display: block; or display: table-cell;, so for example <table class="your-background"> and <tr class="your-background"> won't work.
We use this to get background colors in all browsers (still, IE9+ required).
For chrome, I have used something like this and it worked out for me.
Within the body tag,
<body style="-webkit-print-color-adjust: exact;"> </body>
Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color.
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
I just added to the print media query this snippet and all style was applied as intended:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed".
The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did... great hack, thank you very much :)
Thought I'd add a recent and 2015 relevant aid from a recent print css experience.
Was able to print backgrounds and colors regardless of print dialog box settings.
To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.
Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:
<div class="foo">
<p class="red">Some text</p>
</div>
And your CSS:
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.
Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!
Here it is a full printable HTML page for bootstrap:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Both z-index are resolving recursive element containment */
[background-color] {
z-index: 0;
position: relative;
-webkit-print-color-adjust: exact !important;
}
[background-color] canvas {
display: block;
position:absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- CONTENT -->
<body>
<!-- PRINT ROW BLOCK -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<div background-color="#A400C1">
<h4>
Hey... this works !
</h4>
<div background-color="#0068C1">
<p>
Ohh... this works recursive too !!
<div background-color="green" style="width: 80px; height: 60px">
Any size !!
</div>
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div background-color="#FFCB83" style="height: 200px">
Some content...
</div>
</div>
</div>
<script>
var containers = document.querySelectorAll("[background-color]");
for (i = 0; i < containers.length; i++)
{
// Element
var container = containers[i];
container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');
// Color
var color = container.getAttribute("background-color");
container.style.backgroundColor = color;
// Inner Canvas
var canvas = document.getElementById("canvas-" + i);
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.print();
</script>
</body>
</html>
Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing. This has been very successful for me.
In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.
For example:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
#media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
Also, Enable > Emulate CSS Media From > Inspact > More Tools > Renders. Very detailed steps can be found here.
You can use the tag canvas and "draw" the background, which work on IE9, Gecko and Webkit.
If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.
The html on the page with the background image
<img src="someImage.png" class="background-print-img">
The Css
.background-print-img{
display: none;
}
#media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
Do not set the background-color inside the print stylesheet. Just set the attribute in the normal css file and it works fine :)
Checkout this example: The Ultimate Print HTML Template with Header & Footer
Demo: The Ultimate Print HTML Template with Header & Footer Demo
tr.group-title {
padding-top: .5rem;
border-top: 2rem solid lightgray;
}
tr.group-title > td h5 {
margin-top: -1.9rem;
}
<tbody>
<tr class="group-title">
<td colspan="6">
<h5 align="center">{{ group.title }}</h5>
</td>
</tr>
Works in Chrome and Edge
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
}
<div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>
Tested and works in Chrome and Firefox and Edge...
So I am trying to link my HTML file to a CSS file in order to use the spans I created on the CSS file.
I am coding this with the Komodo application. So every time I run the HTML file in a browser it is all black text with no background. Please tell me what I'm doing wrong.
Here is the content of my files.
Logan_Tucker_Style_Sheet.css and Logan_Tucker_Page_With_Link.html
span.firstlinewordone {
background: lime;
color: red
}
span.firstlinewordtwo {
background: #00FF00;
color: #FF0000
}
span.firstlinewordthree {
background: rgb(00, 255, 00);
color: rgb(255, 00, 00)
}
span.secondlinewordone {
background: lime;
color: blue
}
span.secondlinewordtwo {
background: #00FF00;
color: #0000FF
}
span.secondlinewordthree {
background: rgb(00, 255, 00);
color: rgb(00, 00, 255)
}
span.thirdlinewordone {
background: lime;
color: aqua
}
span.thirdlinewordtwo {
background: #00FF00;
color: #00FFFF
}
span.thirdlinewordthree {
background: rgb(00, 255, 00);
color: rgb(00, 255, 255)
}
<!DOCTYPE HTML>
<html>
<head>
<title> Using Custom Colors </title>
<link rel="stylesheet" type="text/css" href="Logan_Tucker_Style_Sheet.css">
</head>
<body>
<span class="firstlinewordone">
One
</span>
<span class="firstlinewordtwo">
Two
</span>
<span class="firstlinewordthree">
Three
</span>
<br>
<span class="secondlinewordone">
One
</span>
<span class="secondlinewordtwo">
Two
</span>
<span class="secondlinewordthree">
Three
</span>
<br>
<span class="thirdlinewordone">
One
</span>
<span class="thirdlinewordtwo">
Two
</span>
<span class="thirdlinewordthree">
Three
</span>
<br>
</body>
</html>
Looks like your HTML file does not see CSS file. Please try following steps:
Right click on element and choose Inspect Element option. Developer panel should appear, allowing you to see which style applied to selected element
Check browser console for any errors. Especially for Not Found errors. Those will show where your browser search for linked file.
Open HTML code in browser's Inspector, locate link tag and try to open file in new page. If everything is fine, CSS file's content should appear.
Clear browser's cache on page refresh. In Windows you can do so by pressing Ctrl + F5
If nothing helps, something outside is wrong. As you can see, there is nothing wrong in provided code itself, because it renders correctly on this page.
Html and css files are in the same folder?
If css is placed somewhere else you should direct link to it eg. Css/example.css .
Also you don't need to use span.classname in css, try to use without span, just .classname.
I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in #media print.
#media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Everything else works, I can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.
To enable background printing in Chrome:
body {
-webkit-print-color-adjust: exact !important;
}
Edit:
For Chrome, Safari and Firefox:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
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.
Got it:
CSS:
box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
(If the PDF-printer output file is to be believed..?)
Only tested in Chrome + Firefox on Ubuntu...
Try this, it worked for me on Google Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; alone is Not enough
you have to use !important with the attribute
this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag
and this is printing preview on chrome before adding !important
now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule
Two solutions that work (on modern Chrome at least - haven't tested beyond):
!important right in the regular css declaration works (not even in the #media print)
Use svg
If you are looking to create "printer friendly" pages, I recommend adding "!important" to your #media print CSS. This encourages most browsers to print your background images, colors, etc.
EXAMPLES:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this hack:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
Activate it by adding the class to your element:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.
Notice this hack won't work on elements other than display: block; or display: table-cell;, so for example <table class="your-background"> and <tr class="your-background"> won't work.
We use this to get background colors in all browsers (still, IE9+ required).
For chrome, I have used something like this and it worked out for me.
Within the body tag,
<body style="-webkit-print-color-adjust: exact;"> </body>
Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color.
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
I just added to the print media query this snippet and all style was applied as intended:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed".
The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did... great hack, thank you very much :)
Thought I'd add a recent and 2015 relevant aid from a recent print css experience.
Was able to print backgrounds and colors regardless of print dialog box settings.
To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.
Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:
<div class="foo">
<p class="red">Some text</p>
</div>
And your CSS:
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.
Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!
Here it is a full printable HTML page for bootstrap:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Both z-index are resolving recursive element containment */
[background-color] {
z-index: 0;
position: relative;
-webkit-print-color-adjust: exact !important;
}
[background-color] canvas {
display: block;
position:absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- CONTENT -->
<body>
<!-- PRINT ROW BLOCK -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<div background-color="#A400C1">
<h4>
Hey... this works !
</h4>
<div background-color="#0068C1">
<p>
Ohh... this works recursive too !!
<div background-color="green" style="width: 80px; height: 60px">
Any size !!
</div>
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div background-color="#FFCB83" style="height: 200px">
Some content...
</div>
</div>
</div>
<script>
var containers = document.querySelectorAll("[background-color]");
for (i = 0; i < containers.length; i++)
{
// Element
var container = containers[i];
container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');
// Color
var color = container.getAttribute("background-color");
container.style.backgroundColor = color;
// Inner Canvas
var canvas = document.getElementById("canvas-" + i);
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.print();
</script>
</body>
</html>
Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing. This has been very successful for me.
In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.
For example:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
#media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
Also, Enable > Emulate CSS Media From > Inspact > More Tools > Renders. Very detailed steps can be found here.
You can use the tag canvas and "draw" the background, which work on IE9, Gecko and Webkit.
If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.
The html on the page with the background image
<img src="someImage.png" class="background-print-img">
The Css
.background-print-img{
display: none;
}
#media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
Do not set the background-color inside the print stylesheet. Just set the attribute in the normal css file and it works fine :)
Checkout this example: The Ultimate Print HTML Template with Header & Footer
Demo: The Ultimate Print HTML Template with Header & Footer Demo
tr.group-title {
padding-top: .5rem;
border-top: 2rem solid lightgray;
}
tr.group-title > td h5 {
margin-top: -1.9rem;
}
<tbody>
<tr class="group-title">
<td colspan="6">
<h5 align="center">{{ group.title }}</h5>
</td>
</tr>
Works in Chrome and Edge
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
}
<div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>
Tested and works in Chrome and Firefox and Edge...
I have this CSS class
.background-color-blue {
background-color: #00C0FF;
}
and I want to be able to use it on some elements if needed.
I now it is not very semantic, but it is used for HTML template that is meant to be easy to use, small in size, and universal.
I want to be able to use it on elements like some panels, sidebars, modals, top-bar menu , or whatever I want
of course it works, but only for divs that do not have background-color already specified.
in this case:
<div class="modal background-color-blue"></div>
.modal has already specified bg color to #fff. now it does not work - it stays white.
I have found two solutions for that:
.background-color-blue {
background-color: #00C0FF !important;
}
and
div.background-color-blue {
background-color: #00C0FF;
}
I am not sure about these... which solution is better? Or is there any other solution that would work better?
I think this method:
.modal.background-color-blue {
background-color: #00C0FF;
}
is not good since I would have to do it with any similar element.
and
<div class="modal">
<div class="background-color-blue">
</div>
</div>
also isn't good since modal already has some padding.
Just use !important it will help to override
.background-color-blue {
background-color: #00C0FF !important;
}
Take a look at this : when-using-important-is-the-right-choice
If you think that modal will be able to have different colors, i guess you'd like this (ITCSS - BEM inspired). This will help you to stay at a low specificity rate, preventing you to have some problems with future classes or have to overwrite them.
Exemple here :
http://codepen.io/AxelCardinaels/pen/ZGVKzp
HTML :
<div class="container">
<div class="modal modal--grey">
<h1 class="modal__title"> Modal Title</h1>
<p class="modal__text">Hello this is the content of the modal !</p>
</div>
</div>
CSS :
/*Base Class */
.modal{
width:40%;
margin:0px auto;
padding:20px;
text-align:center;
border-radius:10px;
box-shadow:1px 1px 1px rgba(1,1,1,0.3);
}
/*Attribute classes for the modal, just make a choice in your HTML ! */
.modal--grey{
background:rgb(220,220,220);
border:1px solid rgb(200,200,200);
}
.modal--blue{
background:rgb(65,105,225);
border:1px solid rgb(58,95,205);
}
The proper usage is
! important
Normally it should have been blue background. Perhaps something else that is preventing the elements of blue.
But don't forget that; the last !important taken into account.
I want a black bar behind a png image, and i want the black bar behind the image to have opacity. When I apply opacity to the black bar, his child element (the png image) inherits this opacity. I dont want this to happen.
The site is www.tomasfleiderman.com.ar , where it says "work for money, design for love" I want a black bar behind with opacity.
The code is the following:
<style type="text/css">
p {
font-size:40px;
color: white;
}
#caja
{
}
#fondofrase
{
}
</style>
<!--
<p>Work for money design for love</p>
-->
<div id="fondofrase">
<div id="caja">
<div>
<img src="http://www.tomasfleiderman.com.ar/1.png" alt="Texto" height="60%" width="60%"/>
</div>
</div>
</div>
Thanks
You can do this with a semi transparent background color: http://jsfiddle.net/alessandro_pezzato/LWh75/
background: rgba(0,0,0,0.8);
You can't do that, at least not easily. Child elements have the same maximum opacity as the parent, so a child image can only have an opacity of, say, '0.6' if the parent has an opacity of '0.6'. You could, though, use some absolute positioning techniques to layer the div and the img on top of each other as sibling elements rather than parent-child elements.
<style>
#positioner {
position: relative;
}
#theText,
#theImage {
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="positioner">
<p id="theText">Work for money design for love</p>
<img id="theImage" />
</div>
You could try setting this style on the surrounding <div>-tag:
background: rgba(0, 0, 0, .5);
However, the browser support of rgba is not perfect, and definitely something you should consider before going with this solution. It tends to break in IE versions below 9 (see link: http://css-tricks.com/rgba-browser-support/).