Menu
My website is working fine but when I click on File > print on browser (its browser print preview) all the CSS is messed and background color is replace with white spaces and not getting logo on preview page.
So how I create a CSS file for print preview and how I call when user click on print.
400
The -webkit-print-color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine. This forces browsers to use background colors when user prints a web page even if they have Print Options Background Graphics turned off.
that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…
Background colour or effects applied to a document is not visible in Print Preview.
You need to provide your markup that for what you are having this error for..
Info : Browser default never prints background color, you need to enable that option in your browser..
Just in case if you are using
<link rel="stylesheet" type="text/css" href="print.css" media="screen" />
Than replace this with media=screen, print so that it will apply rules to your website as well as printing..
<link rel="stylesheet" type="text/css" href="print.css" media="screen, print" />
You can also use print specific stylesheet like this :
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
You can also use print specific @media queries
@media print {
/* Whatever */
}
Last but not the least to enable printing in your browser :
Firefox : Click on alt(if your browser menu bar is hidden) - File - Page Setup - Tick Print Background
Chrome : To enable printing in chrome use this CSS property -webkit-print-color-adjust:exact;
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
