How can i print the page as it is

Question

I'd have added a button in my page include onsubmit="return window.print()" but when i click on it, A print window dialog appears in printing view my page colors turns black all styles gone. How can i print the page as it is with style with same colors

Answer 1

It happens when your css is not optimized for print media. You can include your css in below style.

<link rel="stylesheet" type="text/css" media="print" href="mystyle.css">

And remember that background images not rendered in print.

Reference article : http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

Answer 2

Use the @media print to style your pages for printing.

Example in CSS file:

@media print {//styles
}

Also here is a link to a starter guide of this: http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

Hope that helps.

Answer 3

Link a stylesheet at the bottom of your head (So that it is the primary one).

In that stylesheet put in the following media query

@media print
{
    put styles here
}

Whatever you put in the query will be used in printing.