Browser print preview not showing CSS backgrounds
browser, css, printing
Solution
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;`
Problem
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.