Browser print preview not showing CSS backgrounds

Question

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.

Answer 1

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;