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.

Solution 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;

Solution 2

Create A Stylesheet For Print

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

Do not display unnecessary elements in the print version

Web visitors print your page because of the content on it, not to see the supporting images on your website. Create a class called no-print and add that class declaration to DIVS, images, and other elements that have no print value:

.no-print { 
   display:none; 
}

---

<!-- Example -->
<div id="navigation" class="no-print">
   <!-- who needs navigation when you're looking at a printed piece? -->
</div>

Tips

• Avoid Unnecessary HTML Tables
  Controlling the content area of your website can be extremely challenging when the page structure is trapped in a table.
• Use Page Breaks Page breaks in the browser aren't as reliable as they are in Microsoft Word, especially considering the variable content lengths on dynamically created pages, but when utilized well make all the different in printing your website.
• Size Your Page For Print Obviously your computer monitor can provide a large amount of width to view a page, but I recommend setting the content area width to 600px.

written by David Walsh

Solution 3

Mr. Alien already answered why you didn't get any background color (this also applies for your background logo). However, you stated that your "CSS is messed".

For HTML pages there's a simple thing to keep in mind: don't print them. At least not your usual, heavily graphic based pages. Have you ever noticed how Google provides a special version of maps if you want to print your route? And almost every other page which provides search results or routes will also provide you a special facility for prints. Even Wikipedia has a printable version of every article. Those provide a very simple layout without unnecessary details as page navigation and background images.

The reason for this? CSS in print media is a huge mess. Stick to very basic layouts, provide the most necessary information with not too much distracting graphics. And if you really need to provide a printable version of a website prepare a PDF. Everything else is just masochism.