Posts o[html] Print CSS background
Post
Cancel

o[html] Print CSS background

example when :

1
2
<div style="margin:0 0;padding:0 0;background:#2ea3fb;">
</div>

in browser appears a blue rectangle, when try to print the page this blue rectangle is not printed.

printed when :

1
2
<div style="-webkit-print-color-adjust:exact; margin:0 0;padding:0 0;background:#2ea3fb;">
</div>

In chrome (newer versions 17+ I think), this is controlled by a CSS property on the items which developers can add :

1
-webkit-print-color-adjust:exact;

source : http://stackoverflow.com/a/9339257


1
2
3
4
5
6
7
8
9
/*http://stackoverflow.com/a/12773239
However in general, print styles are either set using a media tag in your existing stylesheet:*/

@media print{
    /*styles here*/
}

/*or linking to a stylesheet specifically for print purposes:*/

similar - dont waste paper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*!
 * print.css v1.0.0
 * http://printstylesheet.com/
 *
 * Copyright (c) 2011 David Bushell
 * Dual licensed under the BSD or MIT licenses: http://printstylesheet.com/license.txt

 * Author: David Bushell
 * http://dbushell.com/
 */

/* use a media query to limit the CSS to only print devices, like a printer */
@media only print
{
	/* hide every element within the body */
	body * { display: none !important; }
	/* add a friendy reminder not to waste paper after the body */
	body:after { content: "Don't waste paper!"; }
}

so here I have a page with a bootstrap print button, where I like when clicked button will not printed

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
@media print {
    #btn_print {
        display: none;
    }
}
</style>

[Print]()
this is a test

origin - http://www.pipiscrew.com/?p=1985 html-print-css-background

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags